javascript - 關於ajax上傳多圖問題。

Question

不知道ajax 是如何上傳多圖發送給後台的。單一圖片的話可以用base64發送給後台， 但是如果多圖用這個方法就不適宜了，因為base64會很大。用什麼方式發送給後台的？後台如果是PHP 是如何接收？根據評論的方法...

三叔 · Answer

還是用表單吧，你選擇直接ajax的原因應該是不想刷新頁面，
這樣的話可以使用formdata進行ajax提交，這是一個H5的新屬性，具體的可以看看實例，它最主要的功能就是將表單域裡的內容封裝成formdata，然後用ajax提交出去，表單控制項的name對應後台的參數name，至於多個圖片就用一組相同name的input就可以了。下面是js和效果圖，還要不懂的話可以追問。

phpcn_u1582 · Answer

http://www.jianshu.com/p/756e...
多圖就是多append進FormData而已

伊谢尔伦 · Answer

使用FormData提交就可以了

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...
主要就是將要上傳的檔案往formData裡面append
後端該怎麼取就怎麼取(php: $_FILES裡面)

怪我咯 · Answer

貌似題主的初衷是一起傳太大了？可以一個一個傳，失敗了也能重試，實現成本低。