如何异步上传文件？

我想用 jQuery 异步上传一个文件。这是我的 HTML：

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

在这里我的Jquery代码：

$(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: ");
            }
        });
    });
});

我只获取文件名，而不是上传文件。我该怎么做才能解决这个问题？

当前解决方案

我正在使用jQuery Form Plugin上传文件。

答案

使用HTML5，您可以使用 Ajax 和 jQuery 进行文件上传。不仅如此，您还可以使用 HTML5 进度标记（或 div）进行文件验证（名称，大小和 MIME 类型）或处理进度事件。最近我不得不制作文件上传器，但我不想使用Flash，也不想使用 Iframe 或插件，经过一些研究后我想出了解决方案。

HTML：

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

首先，如果需要，您可以进行一些验证。例如，在文件的 onChange 事件中：

$(':file').on('change', function() {
    var file = this.files[0];
    if (file.size > 1024) {
        alert('max upload size is 1k')
    }

    // Also see .name, .type
});

现在，Ajax 按下按钮提交：

$(':button').on('click', function() {
    $.ajax({
        // Your server script to process the upload
        url: 'upload.php',
        type: 'POST',

        // Form data
        data: new FormData($('form')[0]),

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,

        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        }
    });
});

正如您所看到的，使用 HTML5（以及一些研究）文件上传不仅可以实现，而且非常简单。尝试使用谷歌浏览器，因为每个浏览器都没有这些示例的 HTML5 组件。

有关 jQuery 的文件上传有各种现成的插件。

做这种上传黑客并不是一种愉快的体验，因此人们喜欢使用现成的解决方案。

这里有几个：

您可以在 NPM 上搜索更多项目（使用 “jquery-plugin” 作为关键字）或在 Github 上搜索。

2017 年更新：它仍然取决于您的人口统计使用的浏览器。

使用 “新”HTML5 file API 需要了解的重要事项是IE 10 之前不支持。如果您所针对的特定市场对旧版 Windows 的倾向高于平均水平，则可能无法访问它。

进入 2017 年，大约 5％的浏览器是 IE 6,7,8 或 9 中的一个。如果你进入一家大公司（例如，这是一个 B2B 工具，或者你正在提供培训的东西），那么这个数字可能会火上浇油。就在几个月前 - 在 2016 年 - 我在超过 60％的机器上使用 IE8 处理了一家公司。

所以，你做任何事情之前： 检查您的用户使用的浏览器 。如果你不这样做，你将学到一个快速而痛苦的教训，为什么 “为我工作” 对于客户的交付是不够的。

我的答案是从 2008 年开始的。

但是，有一些可行的非 JS 文件上传方法。您可以在页面上创建一个 iframe（使用 CSS 隐藏），然后将表单定位到该 iframe。主页不需要移动。

这是一个 “真正的” 帖子，所以它不是完全互动的。如果您需要状态，则需要服务器端进行处理。这根据您的服务器而有很大差异。 ASP.NET具有更好的机制。 PHP plain 失败，但您可以使用Perl或 Apache 修改来绕过它。

如果您需要多个文件上传，最好一次执行一个文件（以克服最大文件上载限制）。将第一个表单发布到 iframe，使用上面的内容监控其进度，完成后，将第二个表单发布到 iframe，依此类推。

或者使用 Java / Flash 解决方案。他们对帖子的处理方式更加灵活......