javascript - Regarding the issue of ajax uploading multiple images.

Question

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 backend, but if there are multiple images, this method is not suitable because the base64 will be very large. In what way is it sent to the backend? If the background is PHP, how does it receive it? According to the comments method...

三叔 · Answer

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_u1582 · Answer

http://www.jianshu.com/p/756e...
Multiple pictures are just append to FormData

伊谢尔伦 · Answer

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);
                }

曾经蜡笔没有小新 · Answer

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)

怪我咯 · Answer

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.