ajax上传进度条，form上传文件进度条

function progressbarStart() { var bararea = $("#progressbar"); // Add Div var div1 = "<div class='mvTxt' style='display:none'>Upload...<span class='mvTxt'></span></div>"; var div2 = "<div class='mvBox' style='display:none'><img class='mvBtn' src='../js/progressbar/images/light.jpg' /></div>"; //这里的图片路径要改哦 bararea.append(div1, div2); // Add Css var mvBox = $(".mvBox"); var mvBtn = $(".mvBtn"); var mvTxt = $(".mvTxt"); bararea.css("padding", "50px"); mvBox.css("height", "15px"); mvBox.css("background", "#F5FAFD url(../js/progressbar/images/bar.jpg) no-repeat left center"); //这里的图片路径要改哦 mvBox.css("width", "471px"); mvBox.css("position", "relative"); mvBox.css("padding", "0 30px"); mvBox.css("margin", "0 auto"); mvBtn.css("position", "absolute"); mvBtn.css("left", "5px"); mvBtn.css("top", "0"); mvTxt.css("height", "50px"); mvTxt.css("line-height", "20px"); mvTxt.css("width", "531px"); mvTxt.css("text-align", "center"); mvTxt.css("font-size", "16px"); mvTxt.css("color", "#1BA1E2"); mvTxt.css("margin", " 0 auto"); mvTxt.css("font-weight", "bold"); mvTxt.show(); mvBox.show(); } /** * 上传监听器 * * @param fun * @returns */ function xhrOnProgress(fun) { xhrOnProgress.onprogress = fun; // 绑定监听 // 使用闭包实现监听绑 return function() { // 通过$.ajaxSettings.xhr();获得XMLHttpRequest对象 var xhr = $.ajaxSettings.xhr(); // 判断监听函数是否为函数 if (typeof xhrOnProgress.onprogress !== 'function') return xhr; // 如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去 if (xhrOnProgress.onprogress && xhr.upload) { xhr.upload.onprogress = xhrOnProgress.onprogress; } return xhr; } } /** * 控制上传进度 * * @param data * @returns */ function progressbarUpdates(data) { var percent = data.loaded / data.total; var delVal = parseInt(percent * 100); setTimeout(function() { $(".mvTxt").eq(1).html(delVal + "%") }, 500); $(".mvBtn").css("left", delVal * 4.6); }