异步上传文件,jquery+ajax,显示进度条
根据网上的资料,做了很多修改,结果发现使用ajax上传数据时若要监听xhr.upload.addEventListener("progress",functiion(e),false),必须将async设置为true。
例子:
//上传文件
function uploadFiles(){ var formData = new FormData();
formData.append("file",$("#uploadFile")[0].files[0]);//append()里面的第一个参数file对应permission/upload里面的参数file $.ajax({
type:"post",
async:true, //这里要设置异步上传,才能成功调用myXhr.upload.addEventListener('progress',function(e){}),progress的回掉函数
Accept:'text/html;charset=UTF-8',
data:formData,
contentType:"multipart/form-data",
url: uploadUrl,
processData: false, // 告诉jQuery不要去处理发送的数据
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
xhr:function(){
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){ // check if upload property exists
myXhr.upload.addEventListener('progress',function(e){
var loaded = e.loaded; //已经上传大小情况
var total = e.total; //附件总大小
var percent = Math.floor(100*loaded/total)+"%"; //已经上传的百分比
console.log("已经上传了:"+percent);
$("#processBar").css("width",percent);
}, false); // for handling the progress of the upload
}
return myXhr;
},
success:function(data){
console.log("上传成功!!!!");
},
error:function(){
alert("上传失败!");
}
});
}
异步上传文件,jquery+ajax,显示进度条的更多相关文章
- idhttp post 上传或下载时显示进度条
通过 idhttp 带进度条上传演示一下,下载和上传原理差不多,说明一下下面例子中的的idhttp 是动态创建的 第一步:添加一个StatusBar或者gauge 进度条,这2个都可以.我用的是 st ...
- idhttp post 上传或下载时显示进度条(对接idhttp1.OnWork事件)
通过 idhttp 带进度条上传演示一下,下载和上传原理差不多,说明一下下面例子中的的idhttp 是动态创建的 第一步:添加一个StatusBar或者gauge 进度条,这2个都可以.我用的是 st ...
- HTML5 jQuery+FormData 异步上传文件,带进度条
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...
- 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload
http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...
- jquery ajaxFileUpload异步上传文件
ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http:/ ...
- Jquery异步上传文件
我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="file" id=&q ...
- struts2 jquery ajaxFileUpload 异步上传文件
网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...
- 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)
前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...
- 利用jquery.form实现异步上传文件
实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...
- (H5)FormData+AJAX+SpringMVC跨域异步上传文件
最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...
随机推荐
- 分形之科赫(Koch)雪花
科赫曲线是一种分形.其形态似雪花,又称科赫雪花.雪花曲线.瑞典人科赫于1904年提出了著名的“雪花”曲线,这种曲线的作法是,从一个正三角形开始,把每条边分成三等份,然后以各边的中间长度为底边.分别向外 ...
- 用光的微粒说和广义相对论来解释衍射现象 Explanation of Diffraction Phenomenon by Particle Theory of Light and General Relativity
历史上,物理学是用波动说来解释光的衍射现象.但用微粒说结合广义相对论同样可以做到. 把光看作粒子,当经过障碍物边缘时,由于广义相对论效应,边缘附近的空间被弯曲,使得不同路径的平行光发生偏转,落在障碍物 ...
- ASP.NET MVC 使用 Log4net 记录日志
Log4net 介绍 Log4net 是 Apache 下一个开放源码的项目,它是Log4j 的一个克隆版.我们可以控制日志信息的输出目的地.Log4net中定义了多种日志信息输出模式.它可以根据需要 ...
- [转]据说200G网盘资料
来源:HACK学习呀 2015cracer入侵入门到精通视频教程 点我查看 trf3 一笔√带过入侵教程 点我查看 ypan [复仇者]新手入门系列(7套) 点我查看 g1tb 菜鸟入门,做的确实不错 ...
- VMware中安装Contos
1 检查BIOS虚拟化支持 2 新建虚拟机 3 新建虚拟机向导 4 创建虚拟空白光盘 5 安装Linux系统对应的CentOS版 6 虚拟机命名和定位磁盘位置 7 处理器配置,看自己是否是双核.多核 ...
- storm安装以及简单操作
storm的安装比较简单,下面以storm的单节点为例说明storm的安装步骤. 1.storm的下载 进入storm的官方网站http://storm.apache.org/,点击download按 ...
- Spring集成Solr搜索引擎
1.导入jar包<dependency><groupId>org.apache.solr</groupId><artifactId>solr-solrj ...
- Vue的声明周期
以下简单介绍,以自己的理解进行分析.如有不好,请大牛勿喷!!!!!! new Vue() 创建 Vue 实例 beforeCreate(){}: 第一生命周期 表示实例完全创建出来,此函数执行是,da ...
- 使用Express构建RESTful API
RESTful服务 REST(Representational State Transfer)的意思是表征状态转移,它是一种基于HTTP协议的网络应用接口风格,充分利用HTTP的方法实现统一风格接口的 ...
- 10-04 Java 权限修饰符,类及其组成常见的修饰符
四种权限修饰符的测试 /* 权限修饰符: 本类 同一个包下(子类和无关类) 不同包下(子类) 不同包下(无关类) private Y 默认 Y Y protected Y Y Y public Y Y ...