jQuery Remotipart發送[對象對象]到服務器

我想用ajax上傳文件到我的Rails應用程序。爲了方便這個，我已經包含了jQuery.remotipart gem。jQuery Remotipart發送[對象對象]到服務器

// app/assets/javascripts/application.js 
//= require jquery.remotipart

我有一個上傳文件的窗體。這些文件由CarrierWave處理。

<%= form_for @import, remote: true do |f| %> 
    <fieldset> 
    <%= f.label :file, "Attach a CSV file" %> 
    <%= f.file_field :file %> 
    </fieldset> 
    <%= f.submit :upload %> 

<% end -%>

不幸的是，當我提交表單與附加文件，它似乎並沒有在我的控制器動作正確的到達。 params散列已將JS對象串化爲鍵。

Started POST "/file_imports" for 127.0.0.1 at 2012-11-06 01:00:49 +0000 
Processing by FileImportsController#create as JS 
    Parameters: {"object Object"=>{","=>{"object Object"=>{","=>{"object Object"=>nil}}}}}`

在Chrome的開發工具，我可以看到，這確實是一個被髮送到服務器的表單數據：

Form data being sent to server

的形式完美的作品，當我刪除remote: true（當然它在這種情況下發送一個HTML請求而不是JS請求）。

任何人有任何想法我做錯了什麼？順便說一句，我使用的Rails 3.2.8和Remotipart 1.0.2（最新）。

編輯：做了一些更多的挖掘。

縱觀Remotipart來源，我似乎無法理解它應該做什麼。例如，在vendor/assets/javascripts/jquery.remotipart.js，第22行具有如下：

settings.data = form.serializeArray();

再往下來，設置通過$.rails.ajax(settings)發送到服務器。

$.fn.serializeArray()方法返回一個JS對象數組。如果我們將它們分配給jQuery.ajax()的調用的數據屬性，那麼這將佔用我在服務器上看到的序列化對象參數。我們需要傳遞一個對象作爲數據屬性，而不是一個對象數組？

但是，當我嘗試將數組平鋪到一個對象中時，整個事件就會中斷，並將HTML請求發送到服務器而不是JS服務器。我認爲這與jQuery.ajax.processData == false這個事實有關。

我有一個issue on the Remotipart Github。

來源

2012-11-06 David Tuite

這些參數看起來真的很厲害。你確定所有的先決條件的JavaScript加載？你也不需要清單中的所有路徑，單獨使用application.js應該沒問題。 – RadBrad

該清單中的評論實際上並不存在，我只是想指出該應用程序的哪個文件「// = require jquery.manifest」所在的位置。對於混淆的道歉。我確定我要求一切。我有jQuery然後jquery_ujs然後jquery.remotipart按順序。 –

沒問題。一切看起來正確。你在你原來的文章中說'一個文件'，但remotipart是關於'多部分'上傳。你有沒有想過刪除'remotipart'寶石，只是試圖獲得基本的文件上傳與'單一'文件上傳工作？那麼，一旦你瞭解了單個文件上傳的基本機制，然後在相同的文章中引入'remoteipart'來處理多個文件上傳？ – RadBrad

經過大量的調試和閱讀大量的代碼後，我終於找到了最新的與Rails 3.2.8一起工作的gem。我被三個陷阱釘住了：

（1）我在表單提交之前禁用了我的文件輸入字段，導致remotipart忽略它以包含在iframe提交中。您必須確保您的文件輸入已啓用。這是你所看到的錯誤的直接原因。（2）在我的調試過程中，我使用最新的上游源代替jquery.iframe-transport，並且它不支持iframe中的X-Http-Accepts隱藏變量。您必須使用與remotipart gem捆綁在一起的版本。（3）不要忘記連接ajax的回調函數：如果您使用的數據類型不是script，則在表單上填寫完整的表單。如果您未在全局ajax選項中指定dataType，或者在表單上使用data-type屬性，則這是默認值。

來源

2012-11-07 08:06:57

重寫jquery.iframe-transport也是我的問題的根源。感謝你找出了馬特。 –

jQuery Remotipart發送[對象對象]到服務器

回答

相關問題