AJAX文件上传真的可能吗？

13 浏览
0 Comments

AJAX文件上传真的可能吗？

我已经阅读了大量关于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上，它有点乱，但我不这样认为...无论如何，这是HTML代码：




    upload a network
    download the network

具体来说，在我的HTML中发生了这样的情况：当用户点击#load_net锚点时，浏览器会点击#inputfile文件输入框；当用户选择了文件后，浏览器会点击#sendfile提交按钮，从而触发我的JS函数。

问题是发送的是一个空的payload，而不是我的文件。我也尝试过使用let file = $('#inputfile').files[0];和let file = $('#inputfile').get(0).files[0];，但都没有起作用。

0

2 答案

0 Comments

"Is AJAX file upload really possible?" 这个问题出现的原因是因为在代码中使用了一个错误的HTML链接，导致无法执行JavaScript代码，从而无法实现AJAX文件上传。解决方法是修改HTML代码，将链接的href属性改为"javascript:void(0);"，并在onclick事件中执行需要的JavaScript代码。这样就可以成功实现AJAX文件上传了。

0
0 Comments

AJAX文件上传是否真的可能?

最近我遇到了同样的问题。

在将文件和表单数据发送到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(serializedFormObject)
}).done(function (_p) {
}).fail(function (xhr, status, error) {
});

也许另一种选择是通过HTML5 canvas reader将文件对象转换为base64并以字符串形式发送。

好吧，我通过$("#filesubmit").serializeObject()得到的结果是一个空对象。你的表单有特殊的属性吗?

0