javascript - 使用jquery异步上传文件的操作

Question

我想使用 jQuery 异步上传文件。这是我的 HTML:

<input type="file" id="f" name="f"/>
<input id="upload" type="button" value="Upload"/>

这是我的 JavaScript 代码:

$(document).ready(function () {
$("#upload").click(function () {
    var filename = $("#f").val();

    $.ajax({
        type: "POST",
        url: "addFile.do",
        enctype: 'multipart/form-data',
        data: {
            file: filename
        },
        success: function () {
            alert("All Files Have Been Uploaded ");
        }
    });
});
});

我只得到文件名而不是我上传的实际文件

我正在使用 This Plugin上传文件。

Answer 1

与您想象的不同，代码不使用该插件上传文件。相反，您明确提出了一个 ajax 请求。发生错误是因为 <input type="file"> 的值是文件名，这是您在请求中发送的唯一数据。

相反，您需要使用 $(form).ajaxform() 绑定(bind)表单;然后在点击处理程序中，您可以触发表单上的提交事件。

因此像下面这样的东西应该可以解决问题:

html:

<form method="post" action="addFile.do">
<input type="file" id="f" name="f"/>
<input id="upload" type="button" value="Upload"/>
</form>

和 JavaScript:

$('form').ajaxform({
    success: function () {
        alert("All Files Have Been Uploaded ");
    }
});

$("#upload").click(function() {
    $('form').submit();
});