关键词：
【中文标题】使用 jQuery 的文件上传进度条【英文标题】：File upload progress bar with jQuery 【发布时间】：2013-03-02 20:39:19 【问题描述】：我正在尝试在我的项目中实现 AJAX 文件上传功能。我为此使用 jQuery；我的代码使用 AJAX 提交数据。我还想实现一个文件上传进度条。我怎样才能做到这一点？有什么方法可以计算已经上传了多少，以便我可以计算上传的百分比并创建进度条？
【问题讨论】：
你看过 jQuery 插件或 jQuery UI 吗？ jqueryui.com/progressbar 你看过plugin homepage上的例子吗？ 查看 jQuery 插件 Uploadify。 见***.com/questions/28856729/… 【参考方案1】：我只用 jQuery 完成了这个：
$.ajax(
xhr: function()
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt)
if (evt.lengthComputable)
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
console.log(percentComplete);
if (percentComplete === 100)
, false);
return xhr;
,
url: posturlfile,
type: "POST",
data: JSON.stringify(fileuploaddata),
contentType: "application/json",
dataType: "json",
success: function(result)
console.log(result);
);
【讨论】：
这样更好，因为它不需要 jQuery.ajaxForm。仅与 jQuery 核心库完美配合。 这是这里唯一真正的答案。 (y) 如何获取fileuploaddata？
这完全是客户端的。这显示了客户端上传的数据量，而不是服务器接收到的数据量。因此，请务必仅在完整的 ajax 请求结束后显示最终的“成功”消息。
***.com/questions/6974684/… 这是关于如何获取fileuploaddata。【参考方案2】：
注意：本题与jQuery form plugin有关。如果您正在寻找纯 jQuery 解决方案，start here。 没有适用于所有浏览器的整体 jQuery 解决方案。所以你必须使用插件。我正在使用dropzone.js，它可以轻松地回退旧版浏览器。您喜欢哪个插件取决于您的需求。那里有很多很好的比较帖子。
来自examples：
jQuery：
$(function()
var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');
$('form').ajaxForm(
beforeSend: function()
status.empty();
var percentVal = '0%';
bar.width(percentVal);
percent.html(percentVal);
,
uploadProgress: function(event, position, total, percentComplete)
var percentVal = percentComplete + '%';
bar.width(percentVal);
percent.html(percentVal);
,
complete: function(xhr)
status.html(xhr.responseText);
);
);
html：
<form action="file-echo2.php" method="post" enctype="multipart/form-data">
<input type="file" name="myfile"><br>
<input type="submit" value="Upload File to Server">
</form>
<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>
<div id="status"></div>
您必须使用 css 设置进度条的样式...
【讨论】：
我使用了 'uploadProgress' 并使用了 jquery-ui 进度条。谢谢 您好 Jam，我实现了您的代码，但收到 500 个内部服务器错误。 听起来您的 PHP 代码有错误。你的 file-echo2.php 长什么样子？ 这可能是jquery.malsup.com/form/#getting-started，但不是直接使用Jquery @Lem：你说得对，这段代码来自 malsup (jquery.malsup.com/form/progress.html) 使用 Form Plugin 的演示【参考方案3】：我在我的项目中使用了以下内容。 你也可以试试。
ajax = new XMLHttpRequest();
ajax.onreadystatechange = function ()
if (ajax.status)
if (ajax.status == 200 && (ajax.readyState == 4))
//To do tasks if any, when upload is completed
ajax.upload.addEventListener("progress", function (event)
var percent = (event.loaded / event.total) * 100;
//**percent** variable can be used for modifying the length of your progress bar.
console.log(percent);
);
ajax.open("POST", 'your file upload link', true);
ajax.send(formData);
//ajax.send is for uploading form data.
【讨论】：
【参考方案4】：看看这个：http://hayageek.com/docs/jquery-upload-file.php 无意中在网上找到的。
【讨论】：
【参考方案5】：如果你在项目中使用jquery，并且不想从头实现上传机制，可以使用https://github.com/blueimp/jQuery-File-Upload。
他们有一个非常好的 api，具有多个文件选择、拖放支持、进度条、验证和预览图像、跨域支持、分块和可恢复的文件上传。他们有多种服务器语言（node、php、python 和 go）的示例脚本。
演示网址：https://blueimp.github.io/jQuery-File-Upload/.
【讨论】：
我无法使用 PHP 配置该插件。你知道怎么做吗？【参考方案6】：这是一个更完整的 jquery 1.11.x $.ajax() 用法：
<script type="text/javascript">
function uploadProgressHandler(event)
$("#loaded_n_total").html("Uploaded " + event.loaded + " bytes of " + event.total);
var percent = (event.loaded / event.total) * 100;
var progress = Math.round(percent);
$("#uploadProgressBar").html(progress + " percent na ang progress");
$("#uploadProgressBar").css("width", progress + "%");
$("#status").html(progress + "% uploaded... please wait");
function loadHandler(event)
$("#status").html(event.target.responseText);
$("#uploadProgressBar").css("width", "0%");
function errorHandler(event)
$("#status").html("Upload Failed");
function abortHandler(event)
$("#status").html("Upload Aborted");
$("#uploadFile").click(function (event)
event.preventDefault();
var file = $("#fileUpload")[0].files[0];
var formData = new FormData();
formData.append("file1", file);
$.ajax(
url: 'http://testarea.local/UploadWithProgressBar1/file_upload_parser.php',
method: 'POST',
type: 'POST',
data: formData,
contentType: false,
processData: false,
xhr: function ()
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress",
uploadProgressHandler,
false
);
xhr.addEventListener("load", loadHandler, false);
xhr.addEventListener("error", errorHandler, false);
xhr.addEventListener("abort", abortHandler, false);
return xhr;
);
);
</script>
【讨论】：
我试过你的代码 xhr: function() var xhr = new window.XMLHttpRequest(); xhr.upload.addEventListener("进度", uploadProgressHandler, false );但不是在调用我的函数【参考方案7】：这解决了我的问题
var url = "http://localhost/tech1/index.php?route=app/upload/ajax";
$.ajax(
xhr: function()
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt)
if (evt.lengthComputable)
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
var $link = $('.'+ids);
var $img = $link.find('i');
$link.html('Uploading..('+percentComplete+'%)');
$link.append($img);
, false);
return xhr;
,
url: url,
type: "POST",
data: JSON.stringify(uploaddata),
contentType: "application/json",
dataType: "json",
success: function(result)
console.log(result);
);
【讨论】：
复制/粘贴卡西尔的答案，基本上【参考方案8】：Kathir's answer 很棒，因为他只用 jQuery 就解决了这个问题。 我只是想在他的答案中添加一些内容，以便使用漂亮的 HTML 进度条来处理他的代码：
$.ajax(
xhr: function()
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt)
if (evt.lengthComputable)
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
$('.progress-bar').width(percentComplete+'%');
$('.progress-bar').html(percentComplete+'%');
, false);
return xhr;
,
url: posturlfile,
type: "POST",
data: JSON.stringify(fileuploaddata),
contentType: "application/json",
dataType: "json",
success: function(result)
console.log(result);
);
这是进度条的HTML代码，我使用Bootstrap 3作为进度条元素：
<div class="progress" style="display:none;">
<div class="progress-bar progress-bar-success progress-bar-striped
active" role="progressbar"
aria-valuemin="0" aria-valuemax="100" style="width:0%">
0%
</div>
</div>
【讨论】：
【参考方案9】：JavaScript：
<script>
/* jquery.form.min.js */
(function(e)"use strict";if(typeof define==="function"&&define.amd)define(["jquery"],e)elsee(typeof jQuery!="undefined"?jQuery:window.Zepto))(function(e)"use strict";function r(t)var n=t.data;if(!t.isDefaultPrevented())t.preventDefault();e(t.target).ajaxSubmit(n)function i(t)var n=t.target;var r=e(n);if(!r.is("[type=submit],[type=image]"))var i=r.closest("[type=submit]");if(i.length===0)returnn=i[0]var s=this;s.clk=n;if(n.type=="image")if(t.offsetX!==undefined)s.clk_x=t.offsetX;s.clk_y=t.offsetYelse if(typeof e.fn.offset=="function")var o=r.offset();s.clk_x=t.pageX-o.left;s.clk_y=t.pageY-o.topelses.clk_x=t.pageX-n.offsetLeft;s.clk_y=t.pageY-n.offsetTopsetTimeout(function()s.clk=s.clk_x=s.clk_y=null,100)function s()if(!e.fn.ajaxSubmit.debug)returnvar t="[jquery.form] "+Array.prototype.join.call(arguments,"");if(window.console&&window.console.log)window.console.log(t)else if(window.opera&&window.opera.postError)window.opera.postError(t)var t=;t.fileapi=e("<input type='file'/>").get(0).files!==undefined;t.formdata=window.FormData!==undefined;var n=!!e.fn.prop;e.fn.attr2=function()if(!n)return this.attr.apply(this,arguments)var e=this.prop.apply(this,arguments);if(e&&e.jquery||typeof e==="string")return ereturn this.attr.apply(this,arguments);e.fn.ajaxSubmit=function(r)function k(t)var n=e.param(t,r.traditional).split("&");var i=n.length;var s=[];var o,u;for(o=0;o<i;o++)n[o]=n[o].replace(/\+/g," ");u=n[o].split("=");s.push([decodeURIComponent(u[0]),decodeURIComponent(u[1])])return sfunction L(t)var n=new FormData;for(var s=0;s<t.length;s++)n.append(t[s].name,t[s].value)if(r.extraData)var o=k(r.extraData);for(s=0;s<o.length;s++)if(o[s])n.append(o[s][0],o[s][1])r.data=null;var u=e.extend(true,,e.ajaxSettings,r,contentType:false,processData:false,cache:false,type:i||"POST");if(r.uploadProgress)u.xhr=function()var t=e.ajaxSettings.xhr();if(t.upload)t.upload.addEventListener("progress",function(e)var t=0;var n=e.loaded||e.position;var i=e.total;if(e.lengthComputable)t=Math.ceil(n/i*100)r.uploadProgress(e,n,i,t),false)return tu.data=null;var a=u.beforeSend;u.beforeSend=function(e,t)if(r.formData)t.data=r.formDataelset.data=nif(a)a.call(this,e,t);return e.ajax(u)function A(t)function T(e)var t=null;tryif(e.contentWindow)t=e.contentWindow.documentcatch(n)s("cannot get iframe.contentWindow document: "+n)if(t)return ttryt=e.contentDocument?e.contentDocument:e.documentcatch(n)s("cannot get iframe.contentDocument: "+n);t=e.documentreturn tfunction k()function f()tryvar e=T(v).readyState;s("state = "+e);if(e&&e.toLowerCase()=="uninitialized")setTimeout(f,50)catch(t)s("Server abort: ",t," (",t.name,")");_(x);if(w)clearTimeout(w)w=undefinedvar t=a.attr2("target"),n=a.attr2("action"),r="multipart/form-data",u=a.attr("enctype")||a.attr("encoding")||r;o.setAttribute("target",p);if(!i||/post/i.test(i))o.setAttribute("method","POST")if(n!=l.url)o.setAttribute("action",l.url)if(!l.skipEncodingOverride&&(!i||/post/i.test(i)))a.attr(encoding:"multipart/form-data",enctype:"multipart/form-data")if(l.timeout)w=setTimeout(function()b=true;_(S),l.timeout)var c=[];tryif(l.extraData)for(var h in l.extraData)if(l.extraData.hasOwnProperty(h))if(e.isPlainObject(l.extraData[h])&&l.extraData[h].hasOwnProperty("name")&&l.extraData[h].hasOwnProperty("value"))c.push(e('<input type="hidden" name="'+l.extraData[h].name+'">').val(l.extraData[h].value).appendTo(o)[0])elsec.push(e('<input type="hidden" name="'+h+'">').val(l.extraData[h]).appendTo(o)[0])if(!l.iframeTarget)d.appendTo("body")if(v.attachEvent)v.attachEvent("onload",_)elsev.addEventListener("load",_,false)setTimeout(f,15);tryo.submit()catch(m)var g=document.createElement("form").submit;g.apply(o)finallyo.setAttribute("action",n);o.setAttribute("enctype",u);if(t)o.setAttribute("target",t)elsea.removeAttr("target")e(c).remove()function _(t)if(m.aborted||M)returnA=T(v);if(!A)s("cannot access response document");t=xif(t===S&&m)m.abort("timeout");E.reject(m,"timeout");returnelse if(t==x&&m)m.abort("server abort");E.reject(m,"error","server abort");returnif(!A||A.location.href==l.iframeSrc)if(!b)returnif(v.detachEvent)v.detachEvent("onload",_)elsev.removeEventListener("load",_,false)var n="success",r;tryif(b)throw"timeout"var i=l.dataType=="xml"||A.XMLDocument||e.isXMLDoc(A);s("isXml="+i);if(!i&&window.opera&&(A.body===null||!A.body.innerHTML))if(--O)s("requeing onLoad callback, DOM not available");setTimeout(_,250);returnvar o=A.body?A.body:A.documentElement;m.responseText=o?o.innerHTML:null;m.responseXML=A.XMLDocument?A.XMLDocument:A;if(i)l.dataType="xml"m.getResponseHeader=function(e)var t="content-type":l.dataType;return t[e.toLowerCase()];if(o)m.status=Number(o.getAttribute("status"))||m.status;m.statusText=o.getAttribute("statusText")||m.statusTextvar u=(l.dataType||"").toLowerCase();var a=/(json|script|text)/.test(u);if(a||l.textarea)var f=A.getElementsByTagName("textarea")[0];if(f)m.responseText=f.value;m.status=Number(f.getAttribute("status"))||m.status;m.statusText=f.getAttribute("statusText")||m.statusTextelse if(a)var c=A.getElementsByTagName("pre")[0];var p=A.getElementsByTagName("body")[0];if(c)m.responseText=c.textContent?c.textContent:c.innerTextelse if(p)m.responseText=p.textContent?p.textContent:p.innerTextelse if(u=="xml"&&!m.responseXML&&m.responseText)m.responseXML=D(m.responseText)tryL=H(m,u,l)catch(g)n="parsererror";m.error=r=g||ncatch(g)s("error caught: ",g);n="error";m.error=r=g||nif(m.aborted)s("upload aborted");n=nullif(m.status)n=m.status>=200&&m.status<300||m.status===304?"success":"error"if(n==="success")if(l.success)l.success.call(l.context,L,"success",m)E.resolve(m.responseText,"success",m);if(h)e.event.trigger("ajaxSuccess",[m,l])else if(n)if(r===undefined)r=m.statusTextif(l.error)l.error.call(l.context,m,n,r)E.reject(m,"error",r);if(h)e.event.trigger("ajaxError",[m,l,r])if(h)e.event.trigger("ajaxComplete",[m,l])if(h&&!--e.active)e.event.trigger("ajaxStop")if(l.complete)l.complete.call(l.context,m,n)M=true;if(l.timeout)clearTimeout(w)setTimeout(function()if(!l.iframeTarget)d.remove()elsed.attr("src",l.iframeSrc)m.responseXML=null,100)var o=a[0],u,f,l,h,p,d,v,m,g,y,b,w;var E=e.Deferred();E.abort=function(e)m.abort(e);if(t)for(f=0;f<c.length;f++)u=e(c[f]);if(n)u.prop("disabled",false)elseu.removeAttr("disabled")l=e.extend(true,,e.ajaxSettings,r);l.context=l.context||l;p="jqFormIO"+(new Date).getTime();if(l.iframeTarget)d=e(l.iframeTarget);y=d.attr2("name");if(!y)d.attr2("name",p)elsep=yelsed=e('<iframe name="'+p+'" src="'+l.iframeSrc+'" />');d.css(position:"absolute",top:"-1000px",left:"-1000px")v=d[0];m=aborted:0,responseText:null,responseXML:null,status:0,statusText:"n/a",getAllResponseHeaders:function(),getResponseHeader:function(),setRequestHeader:function(),abort:function(t)var n=t==="timeout"?"timeout":"aborted";s("aborting upload... "+n);this.aborted=1;tryif(v.contentWindow.document.execCommand)v.contentWindow.document.execCommand("Stop")catch(r)d.attr("src",l.iframeSrc);m.error=n;if(l.error)l.error.call(l.context,m,n,t)if(h)e.event.trigger("ajaxError",[m,l,n])if(l.complete)l.complete.call(l.context,m,n);h=l.global;if(h&&0===e.active++)e.event.trigger("ajaxStart")if(h)e.event.trigger("ajaxSend",[m,l])if(l.beforeSend&&l.beforeSend.call(l.context,m,l)===false)if(l.global)e.active--E.reject();return Eif(m.aborted)E.reject();return Eg=o.clk;if(g)y=g.name;if(y&&!g.disabled)l.extraData=l.extraData||;l.extraData[y]=g.value;if(g.type=="image")l.extraData[y+".x"]=o.clk_x;l.extraData[y+".y"]=o.clk_yvar S=1;var x=2;var N=e("meta[name=csrf-token]").attr("content");var C=e("meta[name=csrf-param]").attr("content");if(C&&N)l.extraData=l.extraData||;l.extraData[C]=Nif(l.forceSync)k()elsesetTimeout(k,10)var L,A,O=50,M;var D=e.parseXML||function(e,t)if(window.ActiveXObject)t=new ActiveXObject("Microsoft.XMLDOM");t.async="false";t.loadXML(e)elset=(new DOMParser).parseFromString(e,"text/xml")return t&&t.documentElement&&t.documentElement.nodeName!="parsererror"?t:null;var P=e.parseJSON||function(e)return window["eval"]("("+e+")");var H=function(t,n,r)var i=t.getResponseHeader("content-type")||"",s=n==="xml"||!n&&i.indexOf("xml")>=0,o=s?t.responseXML:t.responseText;if(s&&o.documentElement.nodeName==="parsererror")if(e.error)e.error("parsererror")if(r&&r.dataFilter)o=r.dataFilter(o,n)if(typeof o==="string")if(n==="json"||!n&&i.indexOf("json")>=0)o=P(o)else if(n==="script"||!n&&i.indexOf("javascript")>=0)e.globalEval(o)return o;return Eif(!this.length)s("ajaxSubmit: skipping submit process - no element selected");return thisvar i,o,u,a=this;if(typeof r=="function")r=success:relse if(r===undefined)r=i=r.type||this.attr2("method");o=r.url||this.attr2("action");u=typeof o==="string"?e.trim(o):"";u=u||window.location.href||"";if(u)u=(u.match(/^([^#]+)/)||[])[1]r=e.extend(true,url:u,success:e.ajaxSettings.success,type:i||e.ajaxSettings.type,iframeSrc:/^https/i.test(window.location.href||"")?"javascript:false":"about:blank",r);var f=;this.trigger("form-pre-serialize",[this,r,f]);if(f.veto)s("ajaxSubmit: submit vetoed via form-pre-serialize trigger");return thisif(r.beforeSerialize&&r.beforeSerialize(this,r)===false)s("ajaxSubmit: submit aborted via beforeSerialize callback");return thisvar l=r.traditional;if(l===undefined)l=e.ajaxSettings.traditionalvar c=[];var h,p=this.formToArray(r.semantic,c);if(r.data)r.extraData=r.data;h=e.param(r.data,l)if(r.beforeSubmit&&r.beforeSubmit(p,this,r)===false)s("ajaxSubmit: submit aborted via beforeSubmit callback");return thisthis.trigger("form-submit-validate",[p,this,r,f]);if(f.veto)s("ajaxSubmit: submit vetoed via form-submit-validate trigger");return thisvar d=e.param(p,l);if(h)d=d?d+"&"+h:hif(r.type.toUpperCase()=="GET")r.url+=(r.url.indexOf("?")>=0?"&":"?")+d;r.data=nullelser.data=dvar v=[];if(r.resetForm)v.push(function()a.resetForm())if(r.clearForm)v.push(function()a.clearForm(r.includeHidden))if(!r.dataType&&r.target)var m=r.success||function();v.push(function(t)var n=r.replaceTarget?"replaceWith":"html";e(r.target)[n](t).each(m,arguments))else if(r.success)v.push(r.success)r.success=function(e,t,n)var i=r.context||this;for(var s=0,o=v.length;s<o;s++)v[s].apply(i,[e,t,n||a,a]);if(r.error)var g=r.error;r.error=function(e,t,n)var i=r.context||this;g.apply(i,[e,t,n,a])if(r.complete)var y=r.complete;r.complete=function(e,t)var n=r.context||this;y.apply(n,[e,t,a])var b=e("input[type=file]:enabled",this).filter(function()return e(this).val()!=="");var w=b.length>0;var E="multipart/form-data";var S=a.attr("enctype")==E||a.attr("encoding")==E;var x=t.fileapi&&t.formdata;s("fileAPI :"+x);var T=(w||S)&&!x;var N;if(r.iframe!==false&&(r.iframe||T))if(r.closeKeepAlive)e.get(r.closeKeepAlive,function()N=A(p))elseN=A(p)else if((w||S)&&x)N=L(p)elseN=e.ajax(r)a.removeData("jqxhr").data("jqxhr",N);for(var C=0;C<c.length;C++)c[C]=nullthis.trigger("form-submit-notify",[this,r]);return this;e.fn.ajaxForm=function(t)t=t||;t.delegation=t.delegation&&e.isFunction(e.fn.on);if(!t.delegation&&this.length===0)var n=s:this.selector,c:this.context;if(!e.isReady&&n.s)s("DOM not ready, queuing ajaxForm");e(function()e(n.s,n.c).ajaxForm(t));return thiss("terminating; zero elements found by selector"+(e.isReady?"":" (DOM not ready)"));return thisif(t.delegation)e(document).off("submit.form-plugin",this.selector,r).off("click.form-plugin",this.selector,i).on("submit.form-plugin",this.selector,t,r).on("click.form-plugin",this.selector,t,i);return thisreturn this.ajaxFormUnbind().bind("submit.form-plugin",t,r).bind("click.form-plugin",t,i);e.fn.ajaxFormUnbind=function()return this.unbind("submit.form-plugin click.form-plugin");e.fn.formToArray=function(n,r)var i=[];if(this.length===0)return ivar s=this[0];var o=this.attr("id");var u=n?s.getElementsByTagName("*"):s.elements;var a;if(u&&!/MSIE [678]/.test(navigator.userAgent))u=e(u).get()if(o)a=e(':input[form="'+o+'"]').get();if(a.length)u=(u||[]).concat(a)if(!u||!u.length)return ivar f,l,c,h,p,d,v;for(f=0,d=u.length;f<d;f++)p=u[f];c=p.name;if(!c||p.disabled)continueif(n&&s.clk&&p.type=="image")if(s.clk==p)i.push(name:c,value:e(p).val(),type:p.type);i.push(name:c+".x",value:s.clk_x,name:c+".y",value:s.clk_y)continueh=e.fieldValue(p,true);if(h&&h.constructor==Array)if(r)r.push(p)for(l=0,v=h.length;l<v;l++)i.push(name:c,value:h[l])else if(t.fileapi&&p.type=="file")if(r)r.push(p)var m=p.files;if(m.length)for(l=0;l<m.length;l++)i.push(name:c,value:m[l],type:p.type)elsei.push(name:c,value:"",type:p.type)else if(h!==null&&typeof h!="undefined")if(r)r.push(p)i.push(name:c,value:h,type:p.type,required:p.required)if(!n&&s.clk)var g=e(s.clk),y=g[0];c=y.name;if(c&&!y.disabled&&y.type=="image")i.push(name:c,value:g.val());i.push(name:c+".x",value:s.clk_x,name:c+".y",value:s.clk_y)return i;e.fn.formSerialize=function(t)return e.param(this.formToArray(t));e.fn.fieldSerialize=function(t)var n=[];this.each(function()var r=this.name;if(!r)returnvar i=e.fieldValue(this,t);if(i&&i.constructor==Array)for(var s=0,o=i.length;s<o;s++)n.push(name:r,value:i[s])else if(i!==null&&typeof i!="undefined")n.push(name:this.name,value:i));return e.param(n);e.fn.fieldValue=function(t)for(var n=[],r=0,i=this.length;r<i;r++)var s=this[r];var o=e.fieldValue(s,t);if(o===null||typeof o=="undefined"||o.constructor==Array&&!o.length)continueif(o.constructor==Array)e.merge(n,o)elsen.push(o)return n;e.fieldValue=function(t,n)var r=t.name,i=t.type,s=t.tagName.toLowerCase();if(n===undefined)n=trueif(n&&(!r||t.disabled||i=="reset"||i=="button"||(i=="checkbox"||i=="radio")&&!t.checked||(i=="submit"||i=="image")&&t.form&&t.form.clk!=t||s=="select"&&t.selectedIndex==-1))return nullif(s=="select")var o=t.selectedIndex;if(o<0)return nullvar u=[],a=t.options;var f=i=="select-one";var l=f?o+1:a.length;for(var c=f?o:0;c<l;c++)var h=a[c];if(h.selected)var p=h.value;if(!p)p=h.attributes&&h.attributes.value&&!h.attributes.value.specified?h.text:h.valueif(f)return pu.push(p)return ureturn e(t).val();e.fn.clearForm=function(t)return this.each(function()e("input,select,textarea",this).clearFields(t));e.fn.clearFields=e.fn.clearInputs=function(t)var n=/^(?:color|date|datetime|email|month|number|password|range|search|tel|text|time|url|week)$/i;return this.each(function()var r=this.type,i=this.tagName.toLowerCase();if(n.test(r)||i=="textarea")this.value=""else if(r=="checkbox"||r=="radio")this.checked=falseelse if(i=="select")this.selectedIndex=-1else if(r=="file")if(/MSIE/.test(navigator.userAgent))e(this).replaceWith(e(this).clone(true))elsee(this).val("")else if(t)if(t===true&&/hidden/.test(r)||typeof t=="string"&&e(this).is(t))this.value="");e.fn.resetForm=function()return this.each(function()if(typeof this.reset=="function"||typeof this.reset=="object"&&!this.reset.nodeType)this.reset());e.fn.enable=function(e)if(e===undefined)e=truereturn this.each(function()this.disabled=!e);e.fn.selected=function(t)if(t===undefined)t=truereturn this.each(function()var n=this.type;if(n=="checkbox"||n=="radio")this.checked=telse if(this.tagName.toLowerCase()=="option")var r=e(this).parent("select");if(t&&r[0]&&r[0].type=="select-one")r.find("option").selected(false)this.selected=t);e.fn.ajaxSubmit.debug=false)
</script>
<script type="text/javascript">
$(document).ready(function ()
$('#myform').on('change', '.wpcf7-file', function (e)
e.preventDefault();
var myParent = $(this).parent();
var filname= $('input[type=file]').val()
if (filname)
$(this).parent().find('#progress-div').show();
$('#myform').ajaxSubmit(
// target: '#progress-div123',/**********only for response************/
beforeSubmit: function ()
myParent.find('#progress-bar').width('0%');
,
uploadProgress: function (event, position, total, percentComplete)
myParent.find('#progress-bar').width(percentComplete + '%');
myParent.find('#progress-bar').html('<div id="progress-status">' + percentComplete + ' %</div>')
,
success: function showResponse(responseText, statusText, xhr, $form)
//myParent.find('#progress-div').hide(10000);
,
resetForm: false
);
return false;
);
/***********Error msg if file not valid***************/
$('input[type=file]').change(function ()
var val = $(this).val().toLowerCase();
var regex = new RegExp("(.*?)\.(pdf|txt|jpg|png|doc|docx|xlx|xls|xlsx|jpg|ppt|pptx|tif|tiff|\n\
bmp|pcd|gif|bmp|zip|rar|odt|avi|ogg|m4a|mov|mp3|mp4|mpg|wav|wmv|stp|sldprt|sldasm|iges|igs|stl|x_t|step\n\
|stp|prt|asm|idw|iam|ipt|dxf|dwg|pdf|slddrw|dwf)$");
if (!(regex.test(val)))
$(this).val('');
alert('Please select correct file format');
);
/*********End*****************/
);
</script>
样式：
<style>
bodywidth:610px;
#uploadForm border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;
#uploadForm label margin:2px; font-size:1em; font-weight:bold;
.demoInputBoxpadding:5px; border:#F0F0F0 1px solid; border-radius:4px; background-color:#FFF;
#progress-bar background-color: #12CC1A;height:20px;color: #FFFFFF;width:0%;-webkit-transition: width .3s;-moz-transition: width .3s;transition: width .3s;
.btnSubmitbackground-color:#09f;border:0;padding:10px 40px;color:#FFF;border:#F0F0F0 1px solid; border-radius:4px;
#progress-div
border: 1px solid #0fa015;
border-radius: 4px;
margin: -35px 2px 7px 295px;
padding: 5px 0;
text-align: center;
width: 277px;
#targetLayerwidth:100%;text-align:center;
</style>
【讨论】：
这个插件（jQuery 形式）已经很老了。 ¿ 它仍然适用于当前的 jQuery 和浏览器吗？使用 jquery ui 进度条上传文件
】使用jqueryui进度条上传文件【英文标题】：fileuploadwithjqueryuiprogressbar【发布时间】：2011-01-2015:13:55【问题描述】：我正在使用jCrop，我想为图片上传添加一个进度条，如何让jqueryui进度条加载图片字节？【问题讨论】：我相信这... 查看详情
jquery文件上传进度条不准确
...curate【发布时间】：2014-04-3020:45:07【问题描述】：我正在使用jquery文件上传(http://blueimp.github.io/jQuery-File-Upload/)插件。我的代码：$(\'#fileupload\').fileupload(url:\'server/index.php\',dat 查看详情
php使用进度条上传文件-php和jquery(代码片段)
使用jquery.form.js实现文件上传及进度条前端代码
...插件来实现，搭配css样式简单易上手，而且高大上，推荐使用。需要解释下我的结构，#upload-input-file的input标签是真实的文件上传按钮，包裹form标签后可以实现上传功能，#upload-input-btn的button标签是展示给用户的按钮，因为需要... 查看详情
带有进度条的 jQuery ajax 上传 - 没有 flash
...似于uploadify的文件上传器，其进度条不依赖于Flash，最好使用jQuery-这可能吗？【问题讨论】：这是可能的，但它很难开始工作，jQuery还不够，你还需要做一些服务器端编码。看看这个，假设你使用的是PHP 查看详情
使用 jQuery $.ajax 和 Spring Boot 上传图片的进度条
】使用jQuery$.ajax和SpringBoot上传图片的进度条【英文标题】：ProgressbarforanimageuploadwithjQuery$.ajaxandSpringBoot【发布时间】：2018-01-0619:41:49【问题描述】：我在$.ajax帖子中设置进度条时遇到问题，该帖子通过带有Spring框架的@Controller将... 查看详情
具有多个不同输入的文件上传进度条（MVC）
...，用于文件上传进度条，它可以100%正常工作（因为您只使用一个表单输入）。我的情况是我需要将一个文件和4个其他输入（如文本）传递给控制器操作。 查看详情
显示多文件上传 Jquery/Ajax 的进度
...很好。下面是我的源代码。我是jquery的新手，通常我只会使用php，但我发现ajax对用户更友好。<divid="new_upload"><div 查看详情
简单的跨浏览器，带有进度条的 jQuery/PHP 文件上传 [关闭]
】简单的跨浏览器，带有进度条的jQuery/PHP文件上传[关闭]【英文标题】：Simplecross-browser,jQuery/PHPfileuploadwithprogressbar[closed]【发布时间】：2012-05-1516:03:16【问题描述】：我知道有几个关于此的主题，但没有一个为文件上传脚本提供... 查看详情
基于jquery插件uploadify实现实时显示进度条上传图片
...简单易用的多文件上传方案。作为一个Jquery插件，Uploadify使用简单，并具有高度的定制性。Uplo 查看详情
使用 RestTemplate.postForLocation 的文件上传进度条
】使用RestTemplate.postForLocation的文件上传进度条【英文标题】：FileuploadprogressbarusingRestTemplate.postForLocation【发布时间】：2012-12-0217:15:29【问题描述】：我有一个将文件上传到REST服务的Java桌面客户端应用程序。所有对REST服务的调... 查看详情
文件上传和进度条
...在上传文件时根据读取的文件数量显示进度条。我们如何使用JS和Servlet来实现这一点我知道上传我可以使用apachecommonslib，但如何根据读取的数据显示进度条。我是否应该根据读取的数据量向JS代码发送计数响应，如果可以，如何... 查看详情
使用 XMLHttpRequest 上传大文件时的进度条
】使用XMLHttpRequest上传大文件时的进度条【英文标题】：ProgressbarwhileuploadinglargefileswithXMLHttpRequest【发布时间】：2013-04-0415:27:08【问题描述】：我正在尝试使用XMLHttpRequest和file.slice将一些大文件上传到服务器。我已经在文档和其... 查看详情
带进度条的文件上传？
】带进度条的文件上传？【英文标题】：Fileuploaderwithprogressbar?【发布时间】：2011-09-1108:01:12【问题描述】：如何创建带有进度条的HTML/PHP/AJAX文件上传器？我不知道从哪里开始。【问题讨论】：【参考方案1】：我用过Uploadify。易... 查看详情
java多文件上传显示进度条
...进度。手上有类似代码的朋友联系我，扣-15080818，跪求！使用 apachefileupload ,springMVC jquery1.6x,bootstrap 实现一个带进度条的多文件上传，由于fileupload的局限，暂不能实现每个上传文件都显示进度条，只能实现一个总的进度... 查看详情
jquery上传文件显示进度条(代码片段)
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><scriptsrc="../js/jquery.js"></script></head><body><h2>HTML5异步上传文件，带进度条(jQuery)</h2><formm 查看详情
使用 Java 上传文件（带进度条）
】使用Java上传文件（带进度条）【英文标题】：FileUploadwithJava(withprogressbar)【发布时间】：2010-09-2006:17:55【问题描述】：我对Java非常陌生，而且我主要是边学边自学，所以我开始构建一个小程序。我想做一个可以从本地磁盘中... 查看详情
异步上传文件（jquery.form）+进度条+上传到ftp服务器(代码片段)
最近写了一个小项目需要上传文件显示进度条到ftp，总结一下分享我用的是jQuery.form.js上传ftp服务器，自己百度去搭建很简单的Talkischeap.Showmeyourcode. GitHub上面的源码：https://github.com/Vinkong/learngitaspx页面<%@PageLan... 查看详情