下面是关于jQuery中的Ajax异步上传的完整攻略：
什么是Ajax异步上传
在之前不使用Ajax时，文件上传只能通过表单提交的方式，整个页面都要刷新。而现在采用Ajax提交方式，在页面不重载的情况下，上传文件并得到服务器端的响应。
异步上传的详细实现步骤：
- 设置一个表单，包含一个文件上传控件
<form action="your-url" id="uploadForm" enctype="multipart/form-data">
<label for="file">选择文件: </label><input type "file" name="file" id="file">
<input type="submit" value="上传" />
</form>
- 处理Ajax异步上传
$(document).ready(function(){
$('#uploadForm').submit(function(e){
e.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: "your-url",
type: "POST",
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function(data){
alert(data);
},
error: function(){
alert("上传出错");
}
});
return false;
});
});
上文代码中
- e.preventDefault() 阻止表单默认提交
- new FormData($(this)[0]) 创建FormData对象
- url 上传地址
- data 需要提交的数据（表单内容）
- dataType 数据类型（json）
- contentType 默认值为 application/x-www-form-urlencoded;charset=UTF-8，即以表单方式提交数据；false代表禁止设置请求头信息
- processData 默认值为 true，即对于data选项中设置的数据，jQuery默认会序列化为表单类型(default: "application/x-www-form-urlencoded")，所以必须禁用该选项，避免对formdata处理后的数据进行序列化，否则表单无法正常提交
示例一： 文件上传进度条
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传带进度条</title>
</head>
<body>
<form enctype="multipart/form-data" id="upload" method="post">
<input type="file" id="file" name="file" />
<input type="submit" value="上传" />
</form>
<div id="progress" style="width: 400px; height: 20px; background: #ccc;"></div>
<div id="percentage" style="width: 400px; height: 20px; background: #f00;"></div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
//文件上传进度条
$('#upload').submit(function(e){
e.preventDefault();
$.ajax({
url: 'your-upload-url', //请求路径
type: 'post', //提交方式
data: new FormData(this), //表单数据（form表单对象）
processData: false,
contentType: false,
xhr: function(){
let xhr = $.ajaxSettings.xhr();
if(xhr.upload){
xhr.upload.addEventListener('progress', function(e){
//已上传的大小,单位BYTE
let loaded = e.loaded;
//文件总大小,单位BYTE
let total = e.total;
//已经上传的百分比
let percent = Math.floor(100*loaded/total);
//更新进度条
$('#progress').attr('style', 'width:'+percent+'%; height:20px; background:#ccc;');
$('#percentage').text(percent+'%');
});
return xhr;
}
},
success: function(result){
console.log(result);
},
error: function(){
console.warn('文件上传出错！');
}
});
});
});
</script>
</html>
示例二： 图片上传预览
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>预览图片</title>
</head>
<body>
<form enctype="multipart/form-data" method="post">
<input type="file" id="pictureFile" name="pictureFile">
<input type="button" value="上传" id="upload">
</form>
<img src="" id="picturePreview">
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$('#pictureFile').change(function(){
let _this = $(this);
//获取选定文件
let files = this.files[0];
//创建读取文件对象
let reader = new FileReader();
//创建文件读取对象
reader.onload = function(){
$('#picturePreview').attr('src', window.URL.createObjectURL(files)); //图片预览
$('#upload').click(function(){
let formData = new FormData();
formData.append('pictureFile', $('#pictureFile')[0].files[0]);
$.ajax({
url: 'your-upload-url',
contentType:false,
processData:false,
type: 'post',
data: formData,
success: function(result){
console.log(result);
},
error: function(){
console.warn('图片上传出错！');
}
});
});
}
//调用reader的readAsDataURL方法，readsAsDataURL方法用于读取文件内容
reader.readAsDataURL(files);
});
});
</script>
</html>
这样，我们就学习了Ajax异步上传的完整攻略，包含如何设置表单，处理Ajax异步上传，如何设置文件上传进度条等。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery中的ajax异步上传 - Python技术站
微信扫一扫 
支付宝扫一扫 