[C#] 透過AJAX 上傳檔案並且顯示進度 ,使用JQuery傳送byte[] 資料

2017-07-03

為了更好的使用者體驗,這篇文章主要是上傳大的檔案的時候透過AJAX上傳並且顯示知道上傳的百分比
image
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 ,這樣就可以進行換算並且顯示,不會很難紀錄一下,給有需要的人,當然我這邊沒有做酷炫的特效,反正你都有百分比了,你要怎麼酷炫都可以自己辦到了,試試看吧 :)

結果:
image

參考文章:
https://www.codeproject.com/Articles/806075/File-Upload-using-jQuery-AJAX-in-ASP-NET-Web-API
https://dzone.com/articles/file-upload-and-progress


當麻許的超技八 2014 | Donma Hsu Design.