jquery-file-upload:处理多个上传，但在fileupload之前创建照片对象

Question

我使用rails和jquery-file-upload来处理从浏览器到服务器的多个照片上传。我有一个例子设置工作，但事情是，我想要创建的照片对象在服务器上首先为每一张照片，然后发送照片本身(我希望用户能够设置属性的照片，而上传仍在进行中，因此我需要一个id在服务器上)。

因此，我实现了jquery-file-upload add事件，首先向服务器发送一个AJAX请求，然后执行它的javascript响应，其中包含一个new_photo_id和一个名为add_to_dom的模板占位符，以显示在客户机上。因为在创建表单时我还没有照片id，所以我需要更新jquery-file-upload用来发送照片的url，使其包含id，这只有在照片对象创建成功之后才有可能。

对于单个文件，这种方法效果很好，但是对于多个文件，我看到只有一个AJAX create请求进来，它会尝试上传具有相同new_photo_id的所有文件。最初，我认为问题出在new_photo_id变量的全局作用域上(这可能仍然是一个问题)，但如上所述，我实际上只看到一个ajax create请求进入。

值得一提的是，我最初关注的是关于jquery-file-upload的railscast，他使用的方法是逐个发送文件，而不是以数组的形式发送。实际上，我看到浏览器向服务器传递多个文件数据对象，其中包含一个文件array1，其中包含每个文件的信息(以及一个包含元数据的originalfiles数组)。

表单如下所示：

<form action="/photos" enctype="multipart/form-data" id="fileupload" method="post">
  <input name="_method" type="hidden" value="patch" />
  <input id="photo_image" multiple="multiple" name="photo[image]" type="file" />
</form>

这是在客户端处理jquery-file-upload的代码：

jQuery(function() {
  return $('#fileupload').fileupload({
    dataType: "script",
    add: function(e, data) {
      // first create new photo object
      $.ajax({
        type: 'POST',
        url: '/photos',
        dataType: "script"
      }).success(function() {
         // add new photo row to dom
         $('#photos').append(add_to_dom);

         // change file upload url to reflect newly created photo object
         data.url='/photos/'+new_photo_id;

         // submit photo
         return data.submit();
      });
    }
  });
});

由jquery执行的来自服务器的JS响应是由rails创建的，如下所示：

new_photo_id=<%= @photo.id %>;
add_to_dom='<%= j(render partial: "photos/photo", object: @photo) %>';

我遗漏了什么？?

提前谢谢你！

Answer 1

据我所知，您的代码没有任何问题。然而，值得注意的是，每次添加文件时，fileupload模块都会替换文件输入控件。因为您的代码有id属性，所以我想知道这里面是否有什么奇怪的地方。您可以尝试删除该属性，看看它是否会改变一些事情。

我的代码与您的代码之间的另一个不同之处在于，我的表单上没有enctype属性。

我不太相信这会解决你的问题，但是你的代码看起来没问题，所以有些地方不对劲。

Answer 2

好的，在阅读了提示可能存在缓存问题的this之后，我将创建照片的路径改为GET而不是POST，这似乎有帮助。但不完全确定原因，因为jquery ajax文档指出，默认情况下，dataType脚本缓存处于关闭状态。如果任何人有一个解释，我也很乐意听到:)