Rails 3 和 plupload - 上传后如何重定向？

Question

当我通过下面的代码通过 plupload 上传文件时，在 Firebug 控制台中我看到消息 POST /uploads 200 OK 8192ms。文本的颜色是红色。当我查看终端输出时，有 Completed 200 OK in 7653ms。

var uploader = new plupload.Uploader({
    runtimes: 'gears,html5,flash,silverlight,browserplus',
    browse_button: 'pickfiles',    
    autostart : true,    
    max_file_size: '10mb',
    url: '/uploads',
    resize: { width: 320, height: 240, quality: 90 },
    flash_swf_url: '/Scripts/pl/plupload.flash.swf',
    silverlight_xap_url: '/Scripts/pl/plupload.silverlight.xap',
    filters: [
    { title: "Image files", extensions: "jpg,gif,png" },
    { title: "Zip files", extensions: "zip" }
]
});
uploader.bind('Init', function (up, params) {
    $('#filelist')[0].innerHTML = "<div>Current runtime: " + params.runtime + "</div>";
});
uploader.bind('Error', function (up, err) {
    $('#filelist').append("<div>Error: " + err.code +
        ", Message: " + err.message +
        (err.file ? ", File: " + err.file.name : "") +
        "</div>"
    );

});
uploader.bind('FilesAdded', function (up, files) {
    for (var i in files) {
        $('#filelist')[0].innerHTML += '<div id="' + files[i].id + '">' + files[i].name + ' (' + plupload.formatSize(files[i].size) + ') <b></b></div>';
    }
    //uploader.start();
});
$('#uploadfiles').click(function (e) {
    uploader.start();
    e.preventDefault();
});

uploader.bind('UploadProgress', function (up, file) {
    $('#' + file.id)[0].getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
});

uploader.init();

在上传控制器中，创建操作如下所示：

  def create
    @upload = Upload.new(:upload => params[:file])

    if @upload.save
      head 200
      #redirect_to '/users'
    else
      render :action => "new"
    end
  end

如何重定向到任何页面？可以看到，我尝试在完成上传到页面用户后进行重定向，但不幸的是没有发生任何事情。如果在 create 操作中的 head 200 行中，那么也没有发生任何事情。

谁能帮助我，上传完成后如何重定向到任何其他页面？我试图在谷歌上搜索，但我没有找到任何方法......

我还想问你 - 为什么在上传文件后总是在 Firebug 控制台中显示行 POST /uploads 200 OK 没有任何日志消息？

Answer 1

我可以简单地使用 window.location javascript 函数来做到这一点。 Plupload 有一个 uploadcomplete 事件，该事件会生成当所有文件上传完成后。 FileUploaded 事件在单个文件上传后生成。因此，如果您希望上传多个文件，uploadcomplete 事件会很有帮助上传者的想法取自 此处并添加了上传完成事件。这是我的上传者。

<script type="text/javascript">
 $(function(){
  var uploader = new plupload.Uploader({
   runtimes : "html5",
   browse_button : 'pickfiles',
   max_file_size : '100mb',
   url : "/documents",
   multipart: true,
   multipart_params: {
   "authenticity_token" : '<%= form_authenticity_token %>'
  }
});

 uploader.bind('FilesAdded', function(up, files) {
  $.each(files, function(i, file) {
  $('#filelist').append(
    '<div id="' + file.id + '">' +
    'File: ' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>'

    );

  });


   });

  uploader.bind('UploadProgress', function(up, file) {    

$('#' + file.id + " b").html(file.percent + "%");


  });

  uploader.bind('UploadComplete', function(up, files) {
  window.location = '/documents';
 });


  $('#uploadfiles').click(function(e) {
  uploader.start();
  e.preventDefault();
  });


  uploader.init();


  });


  </script>

上传完成后，上传者会重定向以列出所有已上传的文档。

Answer 2

两个选项：

1) Plupload 有一个可供您使用的 FileUploaded 回调：

uploader.bind('FileUploaded', function(up, file, info) {
  // Redirect after successful upload
  window.location = 'http://mysite.com/users';
});

2) 您也可以尝试通过将此代码放入您的 ApplicationController 中，让 Rails 进行重定向：

  # Allows redirecting for AJAX calls as well as normal calls
  def redirect_to(options = {}, response_status = {})
    if request.xhr?
      render(:update) {|page| page.redirect_to(options)}
    else
      super(options, response_status)
    end
  end

Answer 3

您无法以这种方式进行重定向，因为使用任何上传运行时上传文件都是间接操作。 HTML5 使用 XHR，HTML4 使用代理 iframe，flash/silverlight 使用其内置的字节流 API 来执行上传。

如果您一次只上传一个文件，则唯一的选择是使用 FileUploaded 事件。第三个参数由所有运行时的服务器响应填充。您实际上会像这样使用它（从 iWasRobbed 编辑的 copypasta）：

uploader.bind('FileUploaded', function(up, file, info) {
  // Redirect after successful upload
  window.location = info.response;
});

响应将始终是纯文本，因为它是 plupload 唯一可以在几个不同的运行时标准化的东西，因此您的重定向 URL 必须位于响应的正文。如果您需要更复杂的响应，您始终可以发送序列化 JSON 并在客户端解析它。

Answer 4

我知道这有点旧，但我想改进响应。根据 @gonchuki 所说，我按照我的观点这样做了：

uploader.bind('FileUploaded', function(up, file, info) {
  window.location = info.response;
});

在我的控制器中，我只是用简单的文本渲染 url：

def create
  # do stuff here
  render :text => object_path(id: object)
end

希望这也有帮助:)