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

最新推荐文章于 2025-06-22 14:51:47 发布

原创

最新推荐文章于 2025-06-22 14:51:47 发布 · 3.5k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了如何在前端使用HTML、JavaScript和AJAX实现文件上传过程中获取进度信息。通过一个具体的AJAX文件上传函数示例，详细展示了如何监控并显示文件上传的进度，帮助开发者更好地控制用户体验。

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,

最低0.47元/天解锁文章