文档章节

js获取文件上传进度

o
 osc_1ee7cxmx
发布于 2018/08/06 15:58
字数 458
阅读 13
收藏 0
xhr

精选30+云产品,助力企业轻松上云!>>>

js获取文件上传进度:

<input name="file" id="FileUpload" type="file" />
<input type="button" onclick="Submit()" value="提交" />

js监听:

var xhrOnProgress=function(fun) {
	  xhrOnProgress.onprogress = fun; //绑定监听
	  //使用闭包实现监听绑
	  return function() {
	    //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
	    var xhr = $.ajaxSettings.xhr();
	    //判断监听函数是否为函数
	    if (typeof xhrOnProgress.onprogress !== 'function')
	      return xhr;
	    //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
	    if (xhrOnProgress.onprogress && xhr.upload) {
	      xhr.upload.onprogress = xhrOnProgress.onprogress;
	    }
	    return xhr;
	  }
}

 ajax文件上传函数:

function Submit(){

		 var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
		 var formFile = new FormData();
		 
         formFile.append("file", fileObj); //加入文件对象
        
          var data = formFile;
          $.ajax({
                   url: url,
                   data: data,
                   type: "Post",
                   dataType: "json",
                   cache: false,//上传文件无需缓存
                   processData: false,//用于对data参数进行序列化处理 这里必须false
                   contentType: false, //必须
                   xhr:xhrOnProgress(function(e){
		   			  var percent=e.loaded/e.total;//文件上传百分比
		   			  console.log(percent);
		   		   }),
                   success: function (result) {
                       console.log(result);
                   },
               })
	}

  

完整代码:

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
</head>
<body>
	
	  <input name="file" id="FileUpload" type="file" />

	  <input type="button" onclick="Submit()" value="提交" />

</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
	var xhrOnProgress=function(fun) {
	  xhrOnProgress.onprogress = fun; //绑定监听
	  //使用闭包实现监听绑
	  return function() {
	    //通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
	    var xhr = $.ajaxSettings.xhr();
	    //判断监听函数是否为函数
	    if (typeof xhrOnProgress.onprogress !== 'function')
	      return xhr;
	    //如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
	    if (xhrOnProgress.onprogress && xhr.upload) {
	      xhr.upload.onprogress = xhrOnProgress.onprogress;
	    }
	    return xhr;
	  }
    }
	
	function Submit(){

		 var fileObj = document.getElementById("FileUpload").files[0]; // js 获取文件对象
		 var formFile = new FormData();
		
         formFile.append("file", fileObj); //加入文件对象
        
          var data = formFile;
          $.ajax({
                   url: "http://up.qiniu.com/",
                   data: data,
                   type: "Post",
                   dataType: "json",
                   cache: false,//上传文件无需缓存
                   processData: false,//用于对data参数进行序列化处理 这里必须false
                   contentType: false, //必须
                   xhr:xhrOnProgress(function(e){
		   			  var percent=e.loaded/e.total;
		   			  console.log(percent);
		   		   }),
                   success: function (result) {
                       console.log(result);
                   },
               })
	}
	
</script>
</html>

  

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

强制行家更新 - Force maven update

问题: I imported my working project on other computer so it started to download dependencies. 我将工作项目导入其他计算机,因此它开始下载依赖项。 Apparently in the meantime my ......

javail
38分钟前
13
0
skywalking实现分布式系统链路追踪

一、背景 随着微服务的越来越流行,我们服务之间的调用关系就显得越来越复杂,我们急需一个APM工具来分析系统中存在的各种性能指标问题以及调用关系。目前主流的APM工具有CAT、Zipkin、Pinpo...

燚-焱
44分钟前
16
0
2020最新的Spring Boot 分布式锁的具体实现(内附代码)

前言 面试总是会被问到有没有用过分布式锁、redis 锁,大部分读者平时很少接触到,所以只能很无奈的回答 “没有”。本文通过 Spring Boot 整合 redisson 来实现分布式锁,并结合 demo 测试结...

北柠Java
51分钟前
28
0
Shiro中获取Cookie

自定义shiro的SessionIdCookie 在使用shiro的时候,曾经有段时间很苦恼,因为我cookie的sessionId经常无故被改,然后抛There is no session with id [xxxx]的异常。我们知道,当请求过来,s...

豫华商
51分钟前
14
0
JPA和Hibernate有什么区别? [关闭] - What's the difference between JPA and Hibernate? [closed]

问题: I understand that JPA 2 is a specification and Hibernate is a tool for ORM. 我知道JPA 2是一个规范,而Hibernate是ORM的工具。 Also, I understand that Hibernate has more fea......

富含淀粉
今天
14
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部