JavaScript中上传文件时，为了避免页面的阻塞，一般都使用了异步上传的方式。简单来说，异步上传文件就是将文件通过 AJAX 方式发送给服务器，实现文件的上传。下文将详细讲解JavaScript中三种异步上传文件方式的攻略。
FormData
使用FormData上传文件，可以将form表单中的所有元素的值（input，textarea，select）通过键值对的方式放入到formData对象中，然后通过AJAX的方式上传数据。在HTML5中，引入了FormData，方便我们处理表单的数据，并可以用于异步文件上传。
以下是一个上传单张图片并返回结果的示例：
<form method="post" enctype="multipart/form-data" >
<label>选择上传的图片:</label>
<input type="file" name="file" id="file" />
<input type="button" value="上传" onclick="uploadFile()" />
</form>
<script>
function uploadFile() {
var formData = new FormData();
formData.append('file',document.getElementById('file').files[0]);
var xhr = new XMLHttpRequest();
xhr.open("POST","",true);
xhr.send(formData);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
};
}
</script>
FileReader
使用FileReader对象，可以在客户端读取文件内容，再将文件内容发送给服务器。FileReader支持二进制和文本文件的读取，在读取文件完成后回调onload事件。
以下是一个使用FileReader上传多张图片的示例：
<html>
<head>
<meta charset="utf-8">
<title>使用FileReader上传图片</title>
</head>
<body>
<form method="post" enctype="multipart/form-data">
<label>选择上传的图片:</label>
<input type="file" name="file" id="file" multiple="multiple" />
<input type="button" value="上传" onclick="uploadFiles()" />
</form>
<script>
function uploadFiles() {
var files = document.getElementById('file').files;
if (files.length === 0) {
return;
}
var xhr = new XMLHttpRequest();
xhr.open('POST', "", true);
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('files', files[i]);
}
xhr.onload = function () {
if (xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(formData);
}
</script>
</body>
</html>
jQuery Form插件
jQuery Form插件是一个好用的ajax表单处理插件，它可以使表单的提交变得更加方便，特别是在上传文件时，它可以自动构建FormData对象，并且可以处理ajax回调函数。
以下是一个使用jQuery Form插件上传文件的示例：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<title>使用jQuery Form上传图片</title>
</head>
<body>
<form method="post" enctype="multipart/form-data" id="uploadForm">
<label>选择上传的图片:</label>
<input type="file" name="file" id="file" />
<input type="submit" value="上传" id="uploadBtn" />
</form>
<script>
$(function(){
$('#uploadForm').ajaxForm({
beforeSubmit: function() {
console.log('start to submit');
},
success:function(data) {
console.log(data);
},
error:function() {
console.log('error');
},
dataType: 'text'
});
});
</script>
</body>
</html>
以上就是关于JavaScript中三种异步上传文件方式的完整攻略，希望对您有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript中三种异步上传文件方式 - Python技术站
微信扫一扫 
支付宝扫一扫 