jquery – 如何异步上传文件?

我想用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 fileAPI 要理解的重要一点是,直到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解决方案。他们对帖子的处理方式更加灵活……

添加评论

友情链接:蝴蝶教程