这是一个老问题，但仍然没有正确答案，因此：

您尝试过jQuery文件上载吗？

下面是上面链接中的一个示例，可以解决您的问题：

$('#fileupload').fileupload({
    add: function (e, data) {
        var that = this;
        $.getJSON('/example/url', function (result) {
            data.formData = result; // e.g. {id: 123}
            $.blueimp.fileupload.prototype
                .options.add.call(that, e, data);
        });
    } 
});

示例：如果使用jQuery，您可以轻松地上传文件。这是一个小而强大的jQuery插件，http://jquery.malsup.com/form/.

实例

var $bar   = $('.ProgressBar');
$('.Form').ajaxForm({
  dataType: 'json',

  beforeSend: function(xhr) {
    var percentVal = '0%';
    $bar.width(percentVal);
  },

  uploadProgress: function(event, position, total, percentComplete) {
    var percentVal = percentComplete + '%';
    $bar.width(percentVal)
  },

  success: function(response) {
    // Response
  }
});

我希望这会有帮助

我一直在使用下面的脚本来上传图像，这很好。

HTML

<input id="file" type="file" name="file"/>
<div id="response"></div>

JavaScript

jQuery('document').ready(function(){
    var input = document.getElementById("file");
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData();
    }
    input.addEventListener("change", function (evt) {
        var i = 0, len = this.files.length, img, reader, file;

        for ( ; i < len; i++ ) {
            file = this.files[i];

            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.onloadend = function (e) {
                        //showUploadedItem(e.target.result, file.fileName);
                    };
                    reader.readAsDataURL(file);
                }

                if (formdata) {
                    formdata.append("image", file);
                    formdata.append("extra",'extra-data');
                }

                if (formdata) {
                    jQuery('div#response').html('<br /><img src="ajax-loader.gif"/>');

                    jQuery.ajax({
                        url: "upload.php",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        success: function (res) {
                         jQuery('div#response').html("Successfully uploaded");
                        }
                    });
                }
            }
            else
            {
                alert('Not a vaild image!');
            }
        }

    }, false);
});

解释

我使用response div显示上传动画和上传完成后的响应。

最好的部分是，当您使用此脚本时，可以随文件发送额外的数据，如id等。我在脚本中提到了额外的数据。

在PHP级别，这将作为正常的文件上传工作。额外数据可以作为$_POST数据检索。

这里你没有使用插件之类的东西。您可以根据需要更改代码。你不是盲目地在这里编码。这是任何jQuery文件上传的核心功能。实际上是Javascript。

为未来读者整理。

异步文件上载

使用HTML5

如果支持FormData和File API（这两个HTML5功能），则可以使用$.ajax（）方法使用jQuery上载文件。

您也可以在不使用FormData的情况下发送文件，但无论哪种方式，文件API都必须以XMLHttpRequest（Ajax）发送的方式处理文件。

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

有关快速纯JavaScript（无jQuery）示例，请参阅“使用FormData对象发送文件”。

退路

当HTML5不受支持（没有文件API）时，唯一的其他纯JavaScript解决方案（没有Flash或任何其他浏览器插件）是隐藏的iframe技术，它允许在不使用XMLHttpRequest对象的情况下模拟异步请求。

它包括使用文件输入将iframe设置为表单的目标。当用户提交请求并上传文件时，响应显示在iframe中，而不是重新呈现主页。隐藏iframe使整个过程对用户透明，并模拟异步请求。

如果处理得当，它实际上应该可以在任何浏览器上运行，但它对如何从iframe中获取响应有一些警告。

在这种情况下，您可能更喜欢使用像Bifröst这样的包装器插件，它使用iframe技术，但也提供jQueryAjax传输，允许仅使用$.Ajax（）方法发送文件，如下所示：

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

插件

Bifröst只是一个小包装，它为jQuery的ajax方法添加了回退支持，但前面提到的许多插件，如jQuery表单插件或jQuery文件上载，都包括从HTML5到不同回退的整个堆栈，以及一些有用的功能来简化过程。根据您的需要和要求，您可能需要考虑一个简单的实现或其中一个插件。

我已经在Rails环境中编写了这篇文章。如果您使用轻量级的jQuery表单插件，它只有大约五行JavaScript。

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

这就是jQuery表单插件发挥作用的地方。

下面是它的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上使用这个，它的效果就像一个冠军。

您可以使用

$(function() {
    $("#file_upload_1").uploadify({
        height        : 30,
        swf           : '/uploadify/uploadify.swf',
        uploader      : '/uploadify/uploadify.php',
        width         : 120
    });
});

Demo