Question

我已经阅读了大量有关AJAX文件上传的Q＆amp; A，但它们都不适用于我。我使用的是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>

你知道这段代码在做什么... 当用户点击这个超链接/标签/按钮时，浏览器会立即尝试打开'href reference page'，这实际上是一个jQuery代码 ，文件选择弹出窗口肯定会打开，但是一旦用户选择他们的文件，他们的浏览器就会挂起（FF）或jQuery错误null或繁荣热潮!! 如此简单的答案是当您的代码实际上不在实际页面上时，它打开jQuery脚本代码或将您的href代码放在浏览器的地址栏/ Url栏中"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输入..：）祝你好运！

AJAX文件上传真的可能吗？

2 个答案: