如何异步上传文件？

Question

I would like to upload a file asynchronously with jQuery. This is my HTML:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

And here my Jquery code:

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

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

Instead of the file being uploaded, I am only getting the filename. What can I do to fix this problem?

Current Solution

I am using the jQuery Form Plugin to upload files.

转载于:https://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously

Answer 1

Note: This answer is outdated, it is now possible to upload files using XHR.

---

You cannot upload files using XMLHttpRequest (Ajax). You can simulate the effect using an iframe or Flash. The excellent jQuery Form Plugin that posts your files through an iframe to get the effect.