我如何可以上传文件异步？ [英] How can I upload files asynchronously?

问题描述

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

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"/>

在这里，我的Jquery code：

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?

我现在用的是 jQuery的形式插件来上传文件。

I am using the jQuery Form Plugin to upload files.

推荐答案

通过 HTML5 可以使文件上传与阿贾克斯和jQuery。不仅如此，你可以做的文件验证（名称，大小和MIME类型）或处理该事件的进展与HTML5进度标签（或者一个div）。最近，我不得不做出一个文件上传，但我不想使用闪存也不是内部框架或插件，并经过一番研究我想出了一个解决方案。

With HTML5 you CAN make file uploads with Ajax and jQuery. Not only that, you can do file validations (name, size, and MIME-type) or handle the progress event with the HTML5 progress tag (or a div). Recently I had to make a file uploader, but I didn't want to use Flash nor Iframes or plugins and after some research I came up with the solution.

中的HTML：

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

首先，你可以做一些验证，如果你想要的。例如，在文件的onChange事件：

First, you can do some validation if you want. For example, in the onChange event of the file:

$(':file').change(function(){
    var file = this.files[0];
    var name = file.name;
    var size = file.size;
    var type = file.type;
    //Your validation
});

现在的阿贾克斯提交与按钮的点击：

Now the Ajax submit with the button's click:

$(':button').click(function(){
    var formData = new FormData($('form')[0]);
    $.ajax({
        url: 'upload.php',  //Server script to process data
        type: 'POST',
        xhr: function() {  // Custom XMLHttpRequest
            var myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){ // Check if upload property exists
                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
            }
            return myXhr;
        },
        //Ajax events
        beforeSend: beforeSendHandler,
        success: completeHandler,
        error: errorHandler,
        // Form data
        data: formData,
        //Options to tell jQuery not to process data or worry about content-type.
        cache: false,
        contentType: false,
        processData: false
    });
});

现在，如果你要处理的进展情况。

Now if you want to handle the progress.

function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded,max:e.total});
    }
}

正如你所看到的，随着HTML5（和一些研究）上传文件不仅成为可能，而且超简单。与谷歌Chrome浏览器尝试，因为其中的一些例子HTML5的组件不可用在每个浏览器。

As you can see, with HTML5 (and some research) file uploading not only becomes possible but super easy. Try it with Google Chrome as some of the HTML5 components of the examples aren't available in every browser.

这篇关于我如何可以上传文件异步？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！