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

解决方案

注意：此答案已过时，现在可以使用XHR上传文件。

我们不能使用XMLHttpRequest(Ajax)上传文件。我们可以使用iframe或者Flash模拟效果。出色的jQuery表单插件，可通过iframe发布文件以获得效果。

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

使用"新的" HTML5fileAPI时要了解的重要一点是，直到IE？10才被支持。如果我们瞄准的特定市场对旧版本Windows的偏好高于平均水平，则我们可能无权使用它。

进入2017年，大约5％的浏览器是IE 6、7、8或者9中的一种。如果我们进入一家大公司(例如，这是B2B工具，或者我们正在交付用于培训的东西)，那么这个数字将会上升。就在几个月前，在2016年，我与一家在其60％以上的计算机上使用IE8的公司打交道。

因此，在执行任何操作之前：检查用户使用的浏览器。如果不这样做，我们将学到一个快速而痛苦的课程，以了解为什么"为我工作"在交付给客户的产品中不够好。

我在2008年的回答如下。

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

这是一个"真实"的帖子，因此并不完全是交互式的。如果我们需要状态，则需要服务器端进行处理。具体取决于服务器。 ASP.NET具有更好的机制。 PHP Plain失败了，但是我们可以使用Perl或者Apache修改来解决它。

如果我们需要多个文件上传，则最好一次执行一个文件(以克服最大文件上传限制)。将第一个表单发布到iframe中，使用上述方法监视进度，完成后，将第二个表单发布到iframe中，依此类推。

或者使用Java / Flash解决方案。他们可以更灵活地处理自己的帖子...

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

进行这种上载的技巧并不是一件令人愉快的事情，因此人们喜欢使用现成的解决方案。

这里有几个：

• jQuery文件上传器
• 多文件上传插件
• 迷你多文件上传
• jQuery文件上传

我们可以在NPM(使用" jquery-plugin"作为关键字)或者Github上搜索更多项目。

我发现的一个解决方案是使<form>目标成为隐藏的iFrame。然后，iFrame可以运行JS以向用户显示其已完成(页面加载时)。

我建议为此使用Fine Uploader插件。JavaScript代码将是：

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

我已经在Rails环境中编写了此代码。如果我们使用轻量级的jQuery-form插件，则仅包含五行JavaScript。

挑战在于如何使AJAX上传工作，因为标准的remote_form_for不能理解多部分表单提交。它不会发送Rails随AJAX请求返回的文件数据。

这就是jQuery-form插件发挥作用的地方。

这是它的Rails代码：

<% remote_form_for(:image_form, 
                   :url => { :controller => "blogs", :action => :create_asset }, 
                   :html => { :method => :post, 
                              :id => 'uploadForm', :multipart => true }) 
                                                                        do |f| %>
 Upload a file: <%= f.file_field :uploaded_data %>
<% end %>

继承人相关的JavaScript：

$('#uploadForm input').change(function(){
 $(this).parent().ajaxSubmit({
  beforeSubmit: function(a,f,o) {
   o.dataType = 'json';
  },
  complete: function(XMLHttpRequest, textStatus) {
   // XMLHttpRequest.responseText will contain the URL of the uploaded image.
   // Put it in an image element you create, or do with it what you will.
   // For example, if you have an image elemtn with id "my_image", then
   //  $('#my_image').attr('src', XMLHttpRequest.responseText);
   // Will set that image tag to display the uploaded image.
  },
 });
});

这是Rails控制器的动作，非常香草：

@image = Image.new(params[:image_form])
 @image.save
 render :text => @image.public_filename

在过去的几周里，我一直在Bloggity中使用它，它的工作原理像冠军。