Question

我正在使用rails和jquery-file-upload来处理从浏览器到服务器的多张照片上传。我有一个示例设置正常工作，但问题是我想在发送照片本身之前首先在服务器上为每张照片创建一个照片对象（我希望用户能够在上传仍然时在照片上设置属性正在进行中所以我需要服务器上的id）。

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

对于单个文件，这种方法效果很好，但是对于多个文件，我看到只有一个AJAX创建请求进入，并且它尝试使用相同的new_photo_id上传所有文件。最初我认为问题在于new_photo_id变量的全局范围（这可能仍然是一个问题），但正如所说的，我实际上只看到一个ajax创建请求进入。

另外值得一提的是，我最初关注的是关于jquery-file-upload的railscast，他使用的方法是通过一个而不是一个数组来发送文件。实际上我看到浏览器将多个文件数据对象传递给包含文件数组[1]的服务器，其中包含每个文件的信息（以及带元数据的原始文件数组）。

表单看起来像这样：

<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 docs声明对于dataType脚本缓存默认是关闭的。如果有人有解释我会很高兴听到它：）

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

2 个答案: