| ajax 上传文件 监听上传进度 | 您所在的位置：网站首页 › flask上传文件进度条 › ajax 上传文件 监听上传进度 |
ajax 上传文件 监听上传进度
|
ajax 上传，监听显示上传进度，前端代码如下 上传进度:0% 上传文件 $("#uploadButton").click(function(){ var formData = new FormData($("#uploadForm")[0]); $.ajax({ type:"post", url:"http://localhost/third/open/data/file/upload", async:true, data:formData, cache:false, processData: false, contentType: false, xhr: function xhr() { //获取原生的xhr对象 var xhr = $.ajaxSettings.xhr(); if (xhr.upload) { //添加 progress 事件监听 xhr.upload.addEventListener('progress', function (e) { //e.loaded 已上传文件字节数 //e.total 文件总字节数 var percentage = parseInt(e.loaded / e.total * 100) $("#uploadProgress").html(percentage) }, false); } return xhr; }, success:function(res){ alert(JSON.stringify(res)) } }); });说明：e.loaded 为已上传文件字节数，e.total 为文件总字节数，这里为了显示好看，将其比值转换为整数，读者可根据自己项目需要使用进度条或进度环
后端代码就不列出了，只是一个上传的接口，如想了解，可参考：https://blog.csdn.net/wsjzzcbq/article/details/87916696
运行效果如下图
|
【本文地址】
公司简介
联系我们