jQuery显示Ajax文件上传进度
<html>
<head>
<title>AjaxFormDataUpload</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
<!--<script src="jquery-3.2.1.js"></script>-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
#upload-form {
width: 50%;
margin: 0 auto;
border: 1px solid blue;
}
.field{
padding: 10px;
}
.submit-btn{
text-align:center;
font-size:20px;
}
</style>
</head>
<body>
<form id="upload-form">
<div class="field">
<input type="file" name="photo" accept="image/*">
<span class="upload-progress"></span>
</div>
<div class="field">
<input type="text" name="words">
</div>
<div class="submit-btn">
<input type="button" value="submit">
</div>
</form>
</body>
</html>
jQuery显示上传进度主要是靠监听xhr.upload.onprogress事件，测试的时候可以把浏览器network里的3G fast或3G slow的打开，就可以降低速度，模拟上传慢的情况：
$(document).ready(function(){
$('input[type="button"]').on('click', function(){
//方式一：用FormData获取form表单中的数据
/*var form = $('#upload-form').get(0);
var formData = new FormData(form);
formData.append('photo', formData.get('photo'));
formData.append('words', formData.get('words'));*/
//方式二：当然，如果你的表单没有用form标签包起来，也可以不用formData的获取方式，直接获取也是可以的
var file = $('input[name="photo"]').get(0).files[0];
var words = $('input[name="words"]').val();
var formData = new FormData();
formData.append('photo', file);
formData.append('words', words);
$.ajax({
type:'post',
url:'./upload.php',
data: formData,
//contentType必须为false（否则会默认为：application/x-www-form-urlencoded; charset=UTF-8）
contentType: false,
//告诉jquery不要处理数据（否则报错：Uncaught TypeError: Illegal invocation）
processData: false,
xhr: function(){
let xhr = new XMLHttpRequest();
//监听上传进度事件
xhr.upload.addEventListener('progress', function (e){
if (e.lengthComputable) {
let progress = e.loaded / e.total;
progress = Math.round(progress * 10000) / 100 + '%';
$('.upload-progress').html(progress);
}
},false);
return xhr;
},
success:function(response){
console.log(response);
}
});
return false;
});
});
觉得文章对你有用的话鼓励一下我吧
