<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>導入數據</title> <script type="text/javascript" src="/webapp/javascript/jquery.min.js"></script> <script type="text/javascript"> //加載完成后執行 $(document).ready(function () { //為上傳按鈕添加點擊事件 $("#btnUpload").click(function () { //創建異步請求對象 var xhr = new XMLHttpRequest(); //創建form對象 var formData = new FormData(); //獲取數據類型參數 var dataType = $("#dataType").val(); //獲取文件名及文件本身 var fileName = $("#fileUpload").val(); //文件名 var file = $("#fileUpload").get(0).files[0]; //文件本身 //判斷文件是否為空，若為空，則提示並返回 if(file == null){ alert("請先選擇要上傳的文件。"); return; } //將文件添加到form表單中 formData.append("file", $("#fileUpload").get(0).files[0]); formData.append("dataType", dataType); //問上傳添加進度處理函數 xhr.upload.onprogress = function (event) { //計算上傳進度百分比 var percentComplete = Math.round(event.loaded * 100 / event.total); //顯示百分比效果 $("#progressUpload").val(percentComplete).show(); } //添加狀態相應處理函數 xhr.onreadystatechange = function () { //如果響應成功 if(xhr.readyState == 4 && xhr.status == 200){ //處理響應結果 /* $("#progressUpload").fadeOut("slow", function(){ //顯示結果 $("#lblMessage").html(xhr.responseText); }); */ } } //響應成功處理函數 xhr.onload = function (e) { if(this.readyState == 4 && this.status == 200){ //隱藏進度條 //處理響應結果 $("#progressUpload").fadeOut("slow", function(){ //顯示結果 $("#lblMessage").show().html("上傳完成！"); }); } } //開始發送數據時 xhr.onloadstart = function () { $("#progressUpload").hide(); $("#lblMessage").hide(); } //超時處理 xhr.ontimeout = function (e) { $("#message").html("sorry,連接超時了！"); } //錯誤處理 xhr.onerror = function (e) { $("#message").html("sorry,連接出錯了！"); } //打開連接請求 xhr.open("POST","test_save",true); //發送數據 xhr.send(formData); }); }); </script> </head> <body> <fieldset> <legend>批量導入數據</legend> <!-- 數據表上傳 --> <select id="dataType" name="dataType"> <option value="教師信息">教師信息</option> <option value="外聘教師" >外聘教師信息</option> <option value="課程信息" >課程信息</option> <option value="班級信息" >班級信息</option> <option value="學生信息" >學生信息</option> <option value="results" >成績信息</option> <option value="教學任務" >教學任務</option> <option value="專業信息" >專業信息</option> <option value="開課計划" >開課計划</option> </select> <input id="fileUpload" type="file" name="file"/> <input id="btnUpload" type="button" value="上傳"/> <div id="message"> <progress id="progressUpload" value="0" max="100" style="display:none;"></progress> <label id="lblMessage"></label> </div> </fieldset> </body> </html>