根据网上的资料,做了很多修改,结果发现使用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,显示进度条的更多相关文章

  1. idhttp post 上传或下载时显示进度条

    通过 idhttp 带进度条上传演示一下,下载和上传原理差不多,说明一下下面例子中的的idhttp 是动态创建的 第一步:添加一个StatusBar或者gauge 进度条,这2个都可以.我用的是 st ...

  2. idhttp post 上传或下载时显示进度条(对接idhttp1.OnWork事件)

    通过 idhttp 带进度条上传演示一下,下载和上传原理差不多,说明一下下面例子中的的idhttp 是动态创建的 第一步:添加一个StatusBar或者gauge 进度条,这2个都可以.我用的是 st ...

  3. HTML5 jQuery+FormData 异步上传文件,带进度条

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href ...

  4. 异步上传文件,ajax上传文件,jQuery插件之ajaxFileUpload

    http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html 一.ajaxFileUpload是一个异步上传文件的jQuery插件. ...

  5. jquery ajaxFileUpload异步上传文件

    ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http:/ ...

  6. Jquery异步上传文件

    我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="file" id=&q ...

  7. struts2 jquery ajaxFileUpload 异步上传文件

    网上搜集的,整理一下. 一.ajaxFileUpload 实现异步上传文件利用到了ajaxFileUpload.js这个文件,这是别人开发的一个jquery的插件,可以实现文件的上传并能够和strut ...

  8. 【转】JQuery插件ajaxFileUpload 异步上传文件(PHP版)

    前几天想在手机端做个异步上传图片的功能,平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现a ...

  9. 利用jquery.form实现异步上传文件

    实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...

  10. (H5)FormData+AJAX+SpringMVC跨域异步上传文件

    最近都没时间整理资料了,一入职就要弄懂业务,整天被业务弄得血崩. 总结下今天弄了一个早上的跨域异步上传文件.主要用到技术有HTML5的FormData,AJAX,Spring MVC. 首先看下上传页 ...

随机推荐

  1. 佛祖保佑,永不死机 - /etc/motd文件配置

    /etc/motd (message of to day:每日信息) 一.执行命令: cat <<EOT >/etc/motd _oo0oo_ (| -_- |) \ = / ___ ...

  2. FastReport

    看下面 https://www.cnblogs.com/m0488/category/477792.html

  3. unity 人工智能AI,装备解锁临时笔记

    A*算法的一种改进设想:1.如何让角色到达目标点的过程中更加平滑:获取一串到达目标点的网格串之后,就实时用带形状的物理射线检测能否直接到达下一个目标点的再下一个目标点,如果能到达,那么直接朝该方向运动 ...

  4. “全栈2019”Java多线程第二十八章:公平锁与非公平锁详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java多 ...

  5. 23_pikle/shevel/json

    一.序列化       存储数据或者传输数据时,需要把对象进行处理,把对象处理成方便存储和传输的数据格式.不同的序列化,结果也不同.     序列化方式:         (1) pickle 可以将 ...

  6. Python isinstance 与 instance 的用法

    instance: instance 属于python2的关键字,python2中如果一个类没有继承自object, 那么实例化出来的对象就是instance类型,否则就是class类型. isins ...

  7. 关于scanf、getchar、getch、getche缓冲区分析——C语言

    缓冲区 根据数据刷新的时机可以将缓冲区的类型分为:全缓冲.行缓冲.无缓冲 (注意:Windows下的输出设备没有缓冲区,意思是printf是无缓冲的,但是在Linux下printf就是行缓冲的,至于为 ...

  8. python之ETL数据清洗案例源代码

    #python语言 import pandas as pd import time data = pd.read_excel('ETL_数据清洗挑战.xlsx','测试数据',dtype=str)#读 ...

  9. Linux - 针对用户账号的常用操作

    用户目录 除root用户外,其他默认的用户目录一般为/home/<user name>. 可以通过如下步骤修改默认用户目录 修改/etc/passwd文件中相应用户的路径信息 停止此用户的 ...

  10. 写一个MySql存储过程实现房贷等额本息还款计算(另外附javascript代码)

    写一个MySql存储过程实现房贷等额本息还款计算 MySql存储过程代码如下: DROP procedure IF EXISTS `calc_equal_interest_proc`; DELIMIT ...