js获取文件上传进度

最新推荐文章于 2023-05-24 17:53:03 发布

chuke5164

最新推荐文章于 2023-05-24 17:53:03 发布

阅读量172

点赞数

文章标签： php json javascript ViewUI

原文链接：https://my.oschina.net/u/4181724/blog/3093250

版权

本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=ibai1aa&title=js%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E8%BF%9B%E5%BA%A6

js获取文件上传进度：

<input name="file" id="FileUpload" type="file" />
<input type="button" οnclick="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" οnclick="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>

本文转载于:猿2048➽https://www.mk2048.com/blog/blog.php?id=ibai1aa&title=js%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E8%BF%9B%E5%BA%A6

转载于:https://my.oschina.net/u/4181724/blog/3093250

chuke5164

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js获取文件上传进度

本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=ibai1aa&title=js%E8%8E%B7%E5%8F%96%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%E8%BF%9B%E5%BA%A6 ...
复制链接

扫一扫