前端获取文件上传进度的方法与实例

关注

原创最新推荐文章于 2026-05-08 09:08:00 发布 3.5k 阅读 AI 写同款· GEO 优化 ›

使用Element UI手动上传单个文件并显示进度条使用Element UI手动上传单个文件并显示进度条场景描述实现过程场景描述使用Element UI的upload组件手动上传文件单个文件，如果选择了多个文件，会覆盖原来要上传的文件，以最新选择的文件为准。上传不使用upload组件自带的上传方式，而是使用axios上传。实现过程部分做法参考自：https://www.cnblogs.com/lovemomo/p/11777608.html... 阅读详情

html

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

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>

收录于