使用jquery.fileupload.js上传文件时添加进度条

1.首先页面用来展示上传按钮和显示进度条的

<tr><td style="width:140px;text-align: right;padding-top: 13px;">全量包上传:</td><td id="all_file"><label class="ace-file-input"><input type="file" id="allfile" name="allfile" ><span class="ace-file-container" data-title="选择"><span class="ace-file-name" data-title="请选择全量包 ..."></td>
</tr>
<tr><td style="width:140px;text-align: right;padding-top: 13px;">上传进度:</td><td><span id="asda" style="width:100%;"><span id='asd'></span></span></td>
</tr>

2.导入js

3.上传文件的请求中加入：progressall

//全量包上传
$("#allfile").fileupload({url: '<%=path%>/htmlversionmanager/upPack.do',fileElementId : 'file',    dataType: 'json',type: "post",add: function(e, data) { //add表示在选择文件时判断某些事件if($("#version").val()==""){$("#version").tips({side:3,msg:'请输入版本号',bg:'#AE81FF',time:2});$("#version").focus();}else{var v=$("#version").val().trim();if(!isVersion(v)){$("#version").tips({side:3,msg:'版本号只能为3位数字，且第一位不能为0',bg:'#AE81FF',time:2});$("#version").focus();}else{//这里是提交上传的请求,(其实是提交了整个表单的数据)data.submit();}}},done: function(e, data) {   //done为文件上传成功需要做的事情}, progressall: function(e, data) {  //进度条显示var progress = parseInt(data.loaded / data.total * 100, 10); $("#asda").html("全量包正在上传:"+progress + '%');$("#asda").append("<span id='asd' style='background-color:#117bed;display:block;height:20px;'></span>");$('#asd').css('width', progress + '%');if(progress==100){$("#asda").html("全量包上传完成!");$('#asd').remove();}},success: function(e, data) {//这里是后台进行上传操作后返回给前台的信息$("#url").val(e.url);$("#sizes").val(e.sizes);$("#createtime").val(e.createtime);$("#all_file").html("<span>全量包已上传</span>");}
});

就大功告成了，是不是很简单~

使用jquery.fileupload.js上传文件时添加进度条相关推荐

jquery fileupload 判断上传文件的类型
//初始化,主要是设置上传参数,以及事件处理方法(回调函数) $("input[name='fileupload']").fileupload({ autoUpload:true, ...
[原创]使用ajaxFileUpload.js上传文件时附带额外参数。
最近公司的一个项目涉及到导入Excel的功能,于是就想到用ajaxFileUpload来实现上传文件,因为用过很多次了,网上也有很多文章介绍.使用方法不表.但是在附带参数这个环节卡住了:文件可以上传到 ...
EXTJS+ASP.NET上传文件带实时进度条代码
一,文件夹二,upLoad.cs是继承IHttpModule的类: usingSystem;usingSystem.Collections.Generic;usingSystem.Linq;usin ...
JavaWeb 使用ajax上传文件并显示进度条等上传信息
文件上传在Web程序中是常用的功能,一般上传图片或者文件大小比较少的文件客户端不需要显示上传进度或文件上传的信息,如果是上传的文件比较大的时候,可以在客户端展示文件上传进度以及根据业务的需求显示文件上 ...
java 上传进度条_Ajax上传文件并显示进度条
第四步:编写前端代码. 1.路径在当前项目的:src\main\resources\asyn.html 上传进度条 align="center"> 0% bordercol ...
IE 下JS上传文件时出现“拒绝访问”的解决方案
很多时候,VS 自带的input[file]控件不能满足我们的要求.而且在不同浏览器中的样式有些许不一致. 比如在IE下: 在chorme中: 所以有时候需要我们自定义file的样式.一般都是通过将f ...
ajax实现一个前台的进度条,前台ajax实现上传文件并且有进度条
// ajax + jQuery上传 function UploadFile() { var xhrOnProgress = function(fun) { xhrOnProgress.onprogr ...
Ajax上传文件并显示进度条
举例说明 (主要用到$.ajax的xhr参数执行回调) xhr 用于创建 XMLHttpRequest 对象的函数. 前端框架:jQuery+Bootstrap+Layer HTML页面里的表单: & ...
php上传图片限制类型,php,_使用php的图片上传类进行图片上传，总是提示：上传文件时出错 : 未允许类型。都是默认的配置，php - phpStudy...
使用php的图片上传类进行图片上传,总是提示:上传文件时出错 : 未允许类型 .都是默认的配置使用php的图片上传类进行图片上传,总是提示:上传文件时出错 : 未允许类型 .都是默认的配置 $upl ...

使用jquery.fileupload.js上传文件时添加进度条

使用jquery.fileupload.js上传文件时添加进度条相关推荐

最新文章

热门文章