如何使用 jQuery 异步上传文件？

马和平

我想用 jQuery 异步上传文件。
* Z9 D3 G  Y' M1 E. d. D( b9 r

$(document).ready(function () {    $("#uploadbutton").click(function () {        var filename = $("#file").val()；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；；$.ajax(((((                      type: &quotOST",           url: "addFile.do",           enctype: 'multipart/form-data  data:                    file: filename           success: function () {                alert("Data Uploaded: ");           }File

我只得到文件名，而不是上传文件。我能做些什么来解决这个问题？
                                                               
    解决方案:                                                               
                                                                使用HTML你可以用 Ajax 和 jQuery 上传文件。不仅如此，还可以验证文件(名称、大小和 MIME 类型)或使用 HTML5 进度标签(或 div）处理进度事件。最近，我不得不制作一个文件上传器，但我不想使用它Flash、Iframe 或插件，经过一番研究，我想出了解决方案。
! @3 I5 v) ^" z  s的HTML：
0 g9 D, ~" x( d) O" J3 }2 s

       

首先，你可以根据需要进行一些验证。例如，在.on('change在文件的情况下：

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

现在$.ajax()点击按钮提交:
% h% @$ @! w: Y[code]$(':button').on('click',function () { $.ajax({    / Your server script to process the upload    url: 'upload.php',   type: 'POST   / Form data    data: new FormData($('form   / / 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;   }code]如您所见，使用 HTML5（和一些研究）文件上传不仅变得可能而且超级容易。尝试使用Google Chrome，因为一些 的示例HTML5 组件不能用于每个浏览器。