formdata 上傳圖片+進度條

記得引入jquery

 

 

 

    //上傳進度回調函數：  
        function progressHandlingFunction(e) {
            if (e.lengthComputable) {
                $('progress').attr({ value: e.loaded, max: e.total }); //更新數據到進度條  
                var percent = e.loaded / e.total * 100;
                $('#progress').html(e.loaded + "/" + e.total + " bytes. " + percent.toFixed(2) + "%");
            }
        }

            $("#upFilebtn").click(function () {
                //判斷文件類型
                var file = $("#AjaxFileData")[0].files[0];
                var imgType = (file.name.substr(file.name.lastIndexOf("."))).toLowerCase();
                if (imgType != ".jpg" && imgType != ".gif" && imgType != ".jpeg" && imgType != ".png") {
                    alert("您上傳圖片的類型不符合(.jpg|.jpeg|.gif|.png)！");
                    return false;
                }
                if (($("#AjaxFileData")[0].files[0].size / 1024) > (5 * 1024)) {
                    alert("上傳圖片不得大於 5M");
                    return;
                }
                var formData = new FormData();
                formData.append("username", "formName");
                formData.append("file", file);
                $.ajax({
                    url: '喂喂改一下',
                    type: 'post',
                    data: formData,
                    xhr: function () { //獲取ajaxSettings中的xhr對象，爲它的upload屬性綁定progress事件的處理函數  
                        myXhr = $.ajaxSettings.xhr();
                        if (myXhr.upload) { //檢查upload屬性是否存在  
                            //綁定progress事件的回調函數  
                            myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
                        }
                        return myXhr; //xhr對象返回給jQuery使用  
                    },
                    processData: false,
                    contentType: false,
                    success: function (msg) {
                   
                    alert('不談了')；
                    }
                });
            });

 

 

html:

  <input id="AjaxFileData" type="file" >

  <input  type="button" id="upFilebtn" >

上傳進度：<progress></progress><br/>  
    <p id="progress">0 bytes</p>  
    <p id="info"></p>

 

server:

  string fileDir = HttpContext.Current.Server.MapPath("~/uploadfile/Do");

       HttpPostedFile file = context.Request.Files["file"];

    file.SaveAs(Path.Combine(fileDir, fileName));

 

好人甲 ： https://www.cnblogs.com/tyqing/p/5995538.html