AJAX文件上傳真的可以嗎？

Question

我已經閱讀了大量關於 AJAX 文件上傳的問答，但沒有一個對我有用。 我使用的是 Chrome 59 和 Safari 10。

這個 AJAX 調用有什么問題？

$(function() {
    $('#filesubmit').submit(function(e) {
        e.preventDefault();

        let file = $('#inputfile').prop('files')[0];
        let formData = new FormData();
        formData.append('file', file);

        $.ajax({
            type: 'POST',
            url: 'getArchFromNet/',
            data: formData,
            processData: false,
            contentType: false,
            cache: false,
            success: function(response) {
                alert('ok');
            }
        });
    });
});

也許問題出在我的 HTML 中，它有點亂，但我不這么認為......無論如何，它是：

<form action="POST" id="filesubmit" style="display:none;">
    <p>
        <input id="inputfile" name="inputfile" type="file" onchange="$('#filesubmit').submit();" />
        <input type="submit" name="sendfile" value="sendfile" />
    </p>
</form>
<p id="net_actions">
    <a id="load_net" href="javascript:$('#inputfile').click();"><img src="{% static 'upload.png' %}" alt="upload a network" /></a>
    <a id="save_net" href="saveNet/?job_id=" type="application/octet-stream"><img src="{% static 'download.png' %}" alt="download the network" /></a>
</p>

具體來說，在我的 HTML 中發生的事情是這樣的：當用戶點擊#load_net錨點時，瀏覽器點擊#inputfile文件輸入； 當用戶選擇一個文件時，瀏覽器點擊#sendfile提交輸入，這會觸發我的 JS 函數。

問題是正在發送一個空的有效負載，而不是我的文件。 我也嘗試使用let file = $('#inputfile').files[0]; 然后let file = $('#inputfile').get(0).files[0]; 但它們都不起作用。

Answer 1

幾天前我遇到了同樣的問題。 在發送到 servlet 之前，我通過序列化文件和表單數據解決了這個問題。

$.fn.serializefiles = function () {
    var obj = $(this);
    var formData = new FormData();
    $.each($(obj).find("input[type='file']"), function (i, tag) {
        $.each($(tag)[0].files, function (i, file)
        {
            formData.append(tag.name, file);
        });
    });
    var params = $(obj).serializeArray();
    $.each(params, function (i, val) {
        formData.append(val.name, val.value);
    });
    return formData;
};

jQuery.fn.serializeObject = function () {
    var arrayData, objectData;
    arrayData = this.serializeArray();
    objectData = {};

    $.each(arrayData, function () {
        var value;

        if (this.value != null) {
            value = this.value;
        } else {
            value = '';
        }

        if (objectData[this.name] != null) {
            if (!objectData[this.name].push) {
                objectData[this.name] = [objectData[this.name]];
            }
            objectData[this.name].push(value);
        } else {
            objectData[this.name] = value;
        }
    });

    return objectData;
};

通過以下方式調用該方法：

var serializedFormData = $("#formData").serializeObject();

我的ajax調用如下：

                     $.ajax({
                        method: "POST",
                        url: urlPath,
                        processData: true,
                        dataType: "json",
                        contentType: "application/json; charset=utf-8",
                        data: JSON.stringify(serzializedFormObject)
                    }).done(function (_p) {
                    }).fail(function (xhr, status, error) {
                    });

也許另一種方法是通過 html5 畫布閱讀器將文件對象轉換為 base64 並將其以字符串形式發送。

Answer 2

“AJAX文件上傳真的可以嗎？”

是的！ 大是！！！ 但對於那些知道如何編碼或如何復制的人.. :D

如果您不熟悉 JavaScript 或 jQuery 或者您的基礎知識仍在增長，那么對您來說可能看起來不可能……但是當您變得更有經驗並花時間學習可以制作自己的坦克的技術時，請相信我.. :D

您的代碼絕對沒問題，但罪魁禍首是在 html 代碼之下。

<a id="load_net" href="javascript:$('#inputfile').click();">
  <img src="{% static 'upload.png' %}" alt="upload a network" />
</a>

你知道這段代碼在做什么......當用戶點擊這個超鏈接/標簽/按鈕時，瀏覽器會立即嘗試打開實際上是一個 jQuery 代碼的“href 參考頁面” ，文件選擇彈出窗口肯定會打開，但是一旦用戶選擇他們的文件他們的瀏覽器將在 null 或繁榮時掛起 (FF) 或 jQuery 錯誤！！。 如此簡單的答案是，當您的代碼實際上不在真實頁面上時，其打開的 jQuery 腳本代碼或將您的 href 代碼放置在瀏覽器的地址欄/網址欄中"javascript:$('#inputfile').click();" 這就是您無法執行 JavaScript 代碼的原因。 因此，最好將您的 html 代碼更改如下，以便更快地呼吸新鮮空氣....：

<a id="load_net" href="javascript:void(0);" onclick="$('#inputfile').click();">
   <img src="{% static 'upload.png' %}" alt="upload a network" />
</a>

更新代碼並在 AjaxPOST 上獲取 ' file ' POST 輸入.. :)祝你好運！