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表单插件来上传文件。


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

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(和一些研究)文件上传不仅变得可能,而且非常容易。尝试使用Google Chrome浏览器,因为这些示例的某些HTML5组件在每个浏览器中都不可用。


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

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

这里有几个:

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


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

使用“新”HTML5 fileAPI 理解的一个重要事项是,直到IE 10才支持该API 。如果您所瞄准的特定市场对较旧版本的Windows具有高于平均水平的倾向,那么您可能无法访问它。

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

所以在你做任何事情之前:检查你的用户使用的浏览器。如果你不这样做,你会学到一个快速而痛苦的教训,说明为什么“为我工作”在客户交付给客户时不够好。

我的答案从2008年开始。


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

这是一个“真实”的帖子,所以它不是完全互动的。如果你需要状态,你需要一些服务器端来处理它。这取决于您的服务器,大量变化。ASP.NET有更好的机制。PHP平原失败,但您可以使用Perl或Apache修改来解决它。

如果您需要多个文件上传,最好每次执行一个文件(以克服最大文件上传限制)。将第一种形式发布到iframe,使用上述内容监视其进度,并在完成后将第二种形式发布到iframe,依此类推。

或者使用Java / Flash解决方案。他们的帖子可以做的更灵活

添加评论

友情链接:蝴蝶教程