我找到的一个解决方案是让<form>以隐藏iFrame为目标。iFrame然后可以运行JS向用户显示它已完成（页面加载时）。

如果使用承诺使用哪种ajax，并检查文件是否有效并保存在后端，那么您可以在用户浏览页面时在前面使用一些动画。

您甚至可以使用递归方法使其并行上传或堆叠

我已经在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上使用这个，它的效果就像一个冠军。

您可以简单地使用jQuery.ajax（）上传。

HTML格式：

<form id="upload-form">
    <div>
        <label for="file">File:</label>
        <input type="file" id="file" name="file" />
        <progress class="progress" value="0" max="100"></progress>
    </div>
    <hr />
    <input type="submit" value="Submit" />
</form>

CSS

.progress { display: none; }

Java脚本：

$(document).ready(function(ev) {
    $("#upload-form").on('submit', (function(ev) {
        ev.preventDefault();
        $.ajax({
            xhr: function() {
                var progress = $('.progress'),
                    xhr = $.ajaxSettings.xhr();

                progress.show();

                xhr.upload.onprogress = function(ev) {
                    if (ev.lengthComputable) {
                        var percentComplete = parseInt((ev.loaded / ev.total) * 100);
                        progress.val(percentComplete);
                        if (percentComplete === 100) {
                            progress.hide().val(0);
                        }
                    }
                };

                return xhr;
            },
            url: 'upload.php',
            type: 'POST',
            data: new FormData(this),
            contentType: false,
            cache: false,
            processData: false,
            success: function(data, status, xhr) {
                // ...
            },
            error: function(xhr, status, error) {
                // ...
            }
       });
    }));
});

Try

异步函数saveFile（）{let formData=新formData（）；formData.append（“file”，file.files[0]）；wait-fetch（'addFile.do'，｛method:“POST”，body:formData｝）；alert（“上传的数据：”）；}<span>文件</span><input type=“file”id=“file”name=“file”size=“10”/><input type=“button”value=“Upload”onclick=“saveFile（）”/>

content-type='multipart/form-data'由浏览器自动设置，文件名也自动添加到文件名FormData参数中（服务器可以轻松读取）。下面是一个更为成熟的错误处理和json添加示例

异步函数saveFile（inp）{让用户＝{name:'john'，年龄：34}；let formData=新formData（）；let photo=inp.files[0]；formData.append（“照片”，照片）；formData.append（“用户”，JSON.stringify（用户））；尝试{let r=等待获取（'/upload/image'，｛method:“POST”，body:formData｝）；console.log（'HTTP响应代码：'，r.status）；警报（“成功”）；}捕获（e）{console.log（'休斯顿我们有问题…：'，e）；}}<input-type=“file”onchange=“saveFile（this）”><br><br>在选择文件之前，打开chrome控制台>网络选项卡以查看请求详细信息。<br><br><small>因为在本例中，我们将请求发送到https://stacksnippets.net/upload/image响应代码当然是404</小>

使用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>

首先，如果需要，可以进行一些验证。例如，在文件的.on（'change'）事件中：

$(':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组件在每个浏览器中都不可用。