您的位置：首页 > 产品设计 > UI/UE

JS/html/form/XMLHttpRequest Ajax 批量上传文件/图片的3种方式

2016-04-02 16:17 495 查看

写在前面：后端选择你项目中使用的语言接收并处理图片。

由于上传图片都是以jQuery插件，为了纯js的崛起，遂选择ajax上传的方式，但在查找相关实例的时候着实困难重重，仅这个上传功能来回测试不下于2天的时间，最终还是执着战胜了困境。

以下3种方式都经多次测试通过。

重要说明：

第一种：切记：form -> enctype="multipart/form-data"

第二种：阻止默认submit：event.preventDefault();

第三种：var formData = new FormData();

formData.append('photos', file);

xhr.send(formData);

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax文件上传</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<h1>1、纯HTML上传文件</h1>
<input type="file" name="pic" accept="image/*">
<input type="submit">
</form>

<form id="file-form">
<h1>2、JS post form file</h1>
<input type="file" name="images" multiple accept="image/*"/>
<button type="submit" name="btn">上传文件</button>
</form>

<div>
<h1>3、JS Ajax post file</h1>
<input type="file" id="files" name="photos" multiple accept="image/*"/>
<button type="submit" id="upload">上传文件</button>
</div>

<script>
// JS post form file
var form = document.getElementById('file-form');
form.onsubmit = function(event) {
event.preventDefault();

var files = form.images.files;
var file = files[0];
var formData = new FormData();
formData.append('images', file);

var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function () {
if (xhr.status === 200) {
// File(s) uploaded.
form.btn.innerText = '上传成功！';
console.log('Upload Finished!!!!!!!!!!');
} else {
alert('An error occurred!');
}
};
xhr.send(formData);
};

var files = document.getElementById('files');
var uploadBtn = document.getElementById('upload');
uploadBtn.onclick = function() {
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
xhr.onload = function () {
if (xhr.status === 200) {
// File(s) uploaded.
uploadBtn.innerHTML = 'Upload Finished';
} else {
alert('An error occurred!');
}
};

var file = files.files[0];
var formData = new FormData();
formData.append('photos', file);
xhr.send(formData);
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航