I don’t know how ajax uploads multiple images and sends them to the background.
For a single image, you can use base64 to send it to the background. However, if you use multiple images, this method is not suitable because the base64 will be very large.
How is it sent to the background? If the background is PHP, how does it receive it?
According to the comment method, I obviously chose 2 pictures to upload. Why is only 1 file displayed in the background?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<form id="form">
<input type="file" multiple="" name="file">
<button id="btn" type="button">上传</button>
</form>
<script>
document.getElementById('btn').onclick = () => {
$.ajax({
url: './test.php',
type: 'POST',
dataType: 'text',
data: new FormData(document.getElementById('form')),
processData: false,
contentType: false,
})
.done(function(data) {
console.log(data);
})
}
</script>
</body>
</html>
三叔2017-06-26 10:57:20
It’s better to use a form. The reason why you choose direct ajax is probably because you don’t want to refresh the page.
In this case, you can use formdata for ajax submission. This is a new attribute of H5. You can see the example for details. Its main function is to The content in the form field is encapsulated into formdata and then submitted using ajax. The name of the form control corresponds to the background parameter name. As for multiple pictures, just use a set of inputs with the same name. Below are the js and renderings. If you still don’t understand, you can ask. 
phpcn_u15822017-06-26 10:57:20
http://www.jianshu.com/p/756e...
Multiple pictures are just append to FormData
伊谢尔伦2017-06-26 10:57:20
Just use FormData to submit
funUploadFile: function(form, files) {
var that = this;
var formData = new FormData(form[0]);
for (var i = 0; i < files.length; i++) {
formData.append('file[' + i + ']', files[i]);
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
//提交返回
}
}
//侦查当前附件上传情况
xhr.upload.onprogress = function(evt) {
var loaded = evt.loaded;
var tot = evt.total;
var per = Math.floor(100 * loaded / tot); //已经上传的百分比
// console.log(per);
}
xhr.open("post", 上传地址);
xhr.send(formData);
}曾经蜡笔没有小新2017-06-26 10:57:20
function httpUpload(url, formData) {
//formData.append("_token", window._token);
return new Promise(function (resolve, reject) {
$.ajax({
url: url,
type: 'POST',
data: formData,
processData: false,
contentType: false,
dataType: "json",
success: function (response) {
resolve(response);
},
error: function (response) {
reject(response);
}
});
});
}https://developer.mozilla.org...
The main thing is to append the file to be uploaded to formData
How to get it on the backend (php: inside $_FILES)
怪我咯2017-06-26 10:57:20
It seems that the original intention of the questioner was that sharing it all together would be too big? You can pass them one by one, and you can try again if you fail, so the implementation cost is low.