<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js" ></script>
</head>
<body>
上传进度:<span id="uploadProgress">0</span>%
<form id="uploadForm" enctype="multipart/form-data">
<input type="file" name="file"/>
</form>
<button id="uploadButton">上传文件</button>
<script>
$("#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))
}
});
});
</script>
</body>
</html>
ajax 上传文件 监听上传进度
最新推荐文章于 2023-08-10 09:24:46 发布