Ajax+Input的File控件上传时的超级简单实时进度条

Html代码：

<input id="inputFile" name="inputFile" type="file" /><div class="progressDiv"><div class="progress"></div></div>

CSS代码：

       .progressDiv {width: 350px;height: 25px;/*border-style: solid;*/border: 1px solid #808080;border-radius: 5px;/*background-color: aqua;*/}.progress {width: 0px;height: 25px;background-color: deepskyblue;}

Js代码：

 $.ajax({url: "",type: "Post",data: form,xhrFields: { withCredentials: true },crossDomain: true,async: true,cache: false,contentType: false,processData: false,dataType: "json",xhr: function () {var xhr = new XMLHttpRequest();//使用XMLHttpRequest.upload监听上传过程，注册progress事件，打印回调函数中的event事件xhr.upload.addEventListener('progress', function (e) {//loaded代表上传了多少//total代表总数为多少var progressRate = (e.loaded / e.total) * 100 + '%';console.log(progressRate);//通过设置进度条的宽度达到效果$(".progress").css('width', progressRate);})return xhr;},success: function (data) {//显示按钮$("#save").prop("style", "display:normal");},error: function (data) {$(".progressDiv").addClass("progressDiv");}})

效果：

Ajax+Input的File控件上传时的超级简单实时进度条相关推荐

使用 SAP UI5 FileUploader 控件上传本地文件试读版
一套适合 SAP UI5 初学者循序渐进的学习教程作者简介 Jerry Wang,2007 年从电子科技大学计算机专业硕士毕业后加入 SAP 成都研究院工作至今.Jerry 是 SAP 社区导师,S ...
asp.net fileupload 文件上传后服务器上找不到文件,Asp.net中FileUpload控件上传文件例子...
FileUpload 控件显示一个文本框控件和一个浏览按钮,使用户可以选择客户端上的文件并将它上载到 Web 服务器.用户通过在控件的文本框中输入本地计算机上文件的完整路径(例如,C:\MyFiles ...
后台处理客户端控件上传的文件（input type=file）
private bool SaveImages() { HttpFileCollection files = HttpContext.Current.Request.F ...
母版中menu控件上传后出现脚本错误
这几天帮朋友做个小网站,为了网站更容易扩展,所以使用了.menu控件做网站导行．本来在做的时候没出错,可上传之后却显示不出,动态菜单的部分,并且提示脚本错误．于是乎上网开始找答案,找了大半天．终于找 ...
解决FileUpload控件上传大文件被拒问题时
在使用Asp.Net自带的服务器端控件Fileupload上传文件时,如果上传的文件比较大,可能会遇到服务器的拒绝服务攻击,此时可以通过在<system.web>中添加: <http ...
php多图片上传到数组,input type=file多图片上传原生html传递的数组集合
单个的input type="file"表单也是可以实现多图片上传的代码如下: 这里要给file表单加上一个multiple属性 multiple="multiple& ...
ASP.NET 2.0使用FileUpload控件上传文件示例
在ASP.NET 2.0中使用FileUpload服务器控件很容易的就能将文件上传到服务器,一个简单的例子如下: aspx: 程序代码 <%@ Page Language="C#&qu ...
＜input type=“file“＞实现上传文件
嗨害嗨,我又来了奥.今天讲一个项目中常见的例子,就是利用input type="file"来进行表单上传文件.首先,我们写好html,如下. <form id="f ...
使用FileUpload控件上传前预览图片
<table class="blue_table" cellpadding="0" cellspacing="0" border=&q ...

Ajax+Input的File控件上传时的超级简单实时进度条

Ajax+Input的File控件上传时的超级简单实时进度条相关推荐

最新文章

热门文章