HTML5中使用jQuery ajax异步上传文件，为什么在后台只获取到了文件名而没有文件内容？

HTML5中使用jQuery ajax异步上传文件，为什么在后台只获取到了文件名而没有文件内容？以下是上传文件示例代码片段

HTML:

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

javascript(jQuery):

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

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

测试之后 ，你会发现，你在后台只能获取到上传文件的文件名，而得不到文件内容。解决办法之一是使用 FormData，以下是使用 FormData 和 ajax 的上传示例。

HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

javascript:

$(':button').on('click', function() {
    $.ajax({
        //上传文件的后台地址
        url: 'upload/save',
        type: 'POST',

        // Form data
        data: new FormData($('form')[0]),
        cache: false,
        contentType: false,
        processData: false,
        // 自定义 XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // 处理上传进度
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        },
    });
});

当然，你还可以在 javascript 脚本中判断文件大小，文件扩展名等，示例：

//当选择的文件发生改变时触发
$(':file').on('change', function() {
    var file = this.files[0];
    if (file.size > 1024) {
        alert('文件不能超过1K')
    }

    // 其他的判断
});