Rails 3和plupload - 如何在上傳後重定向？

Question

當我通過下面的代碼上傳文件plupload，所以在螢火蟲控制檯中，我看到消息POST/uploads 200 OK 8192ms。文本的顏色是紅色的。當我看看終端輸出時，有在7653ms完成200 OK。

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 

我怎樣才能做一個重定向到任何網頁？可以看到，我試圖在完成上傳到頁面用戶後做出重定向，但不幸的是沒有任何事情發生。如果是在創建行動head 200行，所以也沒有發生。

任何人都可以幫助我請完成上傳後，如何重定向到任何其他頁面？我試圖在谷歌搜索，但我沒有找到任何辦法做到這一點...

我想問你 - 爲什麼總是在上傳文件後在Firebug控制檯上線POST/uploads 200 OK沒有任何日誌消息？

Answer 1

兩個選項：

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 2

你不能做這樣的重定向，因爲與任何運行上傳文件上傳是間接訴權n。 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 3

我知道這是有點舊，但我想改善反應。基於什麼@gonchuki說，我這樣做是爲了我的看法：

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

在我控制我只呈現簡單的文字鏈接：

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

希望這有助於太:)

Answer 4

我可以簡單的用window.location的javascript函數來做。 Plupload有一個uploadcomplete事件，當所有文件上傳完成時它會生成。 FileUploaded事件是在單個文件上傳後生成的。因此，如果您想上傳多個文件，uploadcomplete事件會很有幫助。上傳者的想法取自here並添加了上傳完成事件。這是我的上傳者。

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

上傳完成後，上傳器會重定向以列出所有上傳的文檔。