[C#] 透過AJAX 上傳檔案並且顯示進度 ,使用JQuery傳送byte[] 資料
2017-07-03
為了更好的使用者體驗,這篇文章主要是上傳大的檔案的時候透過AJAX上傳並且顯示知道上傳的百分比
1. Server 端,接受檔案的aspx 檔案,當然你可以用ashx , 只是因為我開檔案開錯,就姑且使用aspx 檔案繼續寫下去:
var httpPostedFile = HttpContext.Current.Request.Files["uploadfile"]; httpPostedFile.SaveAs(AppDomain.CurrentDomain.BaseDirectory + "files"+Path.DirectorySeparatorChar + "xxx.jpg");
這邊我預設上傳我會去讀取 uploadfile 的post 的資料,並且我預設存成files 下 xxx.jpg
2.Client 端HTML 的部分:
<input id="File1" name="File1" type="file" /> <button id="btn1" type="button">Upload File</button> <span id="statustxt"></span>
主要statustxt 是要拿來顯示上傳進度的
3.Client Javascript 的部分:
$('#btn1').click(function () { UploadFile(); }); function UploadFile() { var data = new FormData(); var files = $("#File1").get(0).files; if (files.length > 0) { data.append("uploadfile", files[0]); } var ajaxRequest = $.ajax({ type: "POST", url: "/upload2.aspx", contentType: false, processData: false, data: data, xhr: function () { var xhr = new window.XMLHttpRequest(); //用來處理上傳的事件 xhr.upload.addEventListener("progress", function (evt) { //顯示進度 $('#statustxt').html(Math.round(evt.loaded / evt.total * 100) + "%"); }, false); return xhr; } }); ajaxRequest.done(function (xhr, textStatus) { alert('上傳完成!'); }); }
主要其中的重點是模擬一個form 並且將File1 這 input 裡面的file 重新放入一個form 中模擬進行submit ,並且對於xhr 加入 upload 的progress 的listener ,這樣就可以進行換算並且顯示,不會很難紀錄一下,給有需要的人,當然我這邊沒有做酷炫的特效,反正你都有百分比了,你要怎麼酷炫都可以自己辦到了,試試看吧 :)
結果:
參考文章:
https://www.codeproject.com/Articles/806075/File-Upload-using-jQuery-AJAX-in-ASP-NET-Web-API
https://dzone.com/articles/file-upload-and-progress
標籤:
.Net
,
ASP.net
,
C#
,
Javascript
,
Trick
-- Yesterday I wrote down the code. I bet I could be your hero. I am a mighty little programmer. 如果這篇文章有幫助到您,簡單留個言,或是幫我按個讚,讓我有寫下去的動力...