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 参考页面” ，文件选择弹出窗口肯定会打开，但是一旦用户选择他们的文件，他们的浏览器就会挂起 (FF) 或 jQuery 错误在 null 或繁荣繁荣!!。 如此简单的答案是，当您的代码实际上不在真实页面上时，它会打开 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 输入.. :) 祝你好运！