js上傳文件(可自定義進度條)

//本地上傳圖片、語音
function rsc_UploadFile(file) {
    var mypic = file.files[0];
    //創建一個FormData空對象，然后使用append方法添加key/value
    var fd = new FormData();
    fd.append("myhead", mypic);
    //上傳圖片
    if (resourceManager.currentRscType==1)
        fd.append("action", "uploadImg");
    //上傳語音
    else if (resourceManager.currentRscType==3)
        fd.append("action", "uploadVic");
    //上傳視頻
    else if (resourceManager.currentRscType == 5) 
        fd.append("action", "uploadVdo");
    if (resourceManager.currentRscType == 1 || resourceManager.currentRscType == 3)
        $("#resourceManagerUploadContent").css("height", "330px");
    else if (resourceManager.currentRscType == 5)
        $("#resourceManagerUploadContent").css("height", "420px");
    $("#upRscProcessBar").css("display","block");

    $("#upSelectFileBtn").attr("disabled", "disabled");
   
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = JSON.parse(xhr.responseText);//如果上傳圖片成功，則保存
            if (data.returnValue == 0) {               var url = '';
                var sData = '';

                //上傳圖片
                if (resourceManager.currentRscType == 1) {
                    url = GetHost() + data.returnData.tmpImgUrl;                   
                    sData = Base.encode('{"action":"saveImg","iu":"' + url + '"}');
                }//上傳語音
                else if (resourceManager.currentRscType == 3) {
                    url = GetHost() + data.returnData.vicUrl;
                    var duration = data.returnData.duration;                   
                    sData = Base.encode('{"action":"saveVic","vu":"' + url + '","dt":"' + duration + '"}');
                } else if (resourceManager.currentRscType == 5) {
                    url = GetHost() + data.returnData.vdoUrl;
                    var duration = data.returnData.duration;
                    var frontCover = GetHost() + data.returnData.tmpImgUrl;                   
                    var sData = Base.encode('{"action":"saveVdo","vu":"' + url + '","fc":"' + frontCover + '","dt":"' + duration + '"}');
                }
                    
                    $.ajax({
                        type: 'POST',
                        url: GetHost() + 'tyadmin/Resource/index.ashx',
                        data: sData,
                        dataType: 'json',
                        contentType: 'application/json',
                        success: function (data) {
                            if (data) {
                                if (data.returnValue == 0) {
                                    //自動點擊當前選中的資源組並加載圖片
                                    if (group && group > 0 && resourceManager.groups && resourceManager.groups.length > 0) {
                                        try {
                                            resourceManager.isLocalUpload = true;
                                            $("#resourceGroup_" + group).click();
                                        } catch (e) { console.log(e); }
                                    }

                                    //關閉圖片上傳窗體
                                    closeUploadWin();
                                } else alert(data.returnMsg);
                            } else {
                                if (resourceManager.currentRscType == 1)
                                    alert("圖片上傳失敗，請重試！");
                                else if (resourceManager.currentRscType == 3)
                                    alert("語音上傳失敗，請重試！");
                                else if (resourceManager.currentRscType == 5)
                                    alert("視頻上傳失敗，請重試！");
                            }
                            $("#rscUpload").val("");
                        },
                        error: function (msg) {
                            alert(msg.responseText);
                        }
                    });
               
            } else alert(data.returnMsg);

            $("#upSelectFileBtn").removeAttr("disabled");
        }
    }

    //偵查當前附件上傳情況
    xhr.upload.onprogress = function (evt) {

        //偵查附件上傳情況
        //通過事件對象偵查
        //該匿名函數表達式大概0.1秒執行一次

        var loaded = evt.loaded;//已經上傳大小情況
        var tot = evt.total;//附件總大小
        var per = Math.floor(100 * loaded / tot);  //已經上傳的百分比
        try {
            //如果點擊 返回 按鈕，則中斷文件的傳輸
            if (_isRSCXMLHttpAbort) {
                xhr.abort();               
            }
            
            //百分比
            var txtProgress = $("#txtProgress");            
            txtProgress.html(per + "%");
            //進度條
            $(".upRscProcessContent").css("width", per + "%");            
        } catch (e) { }
    }

    xhr.open("post", GetHost() + 'tyadmin/Resource/index.ashx');
    xhr.send(fd);
}

效果圖如下：

 https://www.cnblogs.com/williamwsj/category/928643.html