2011-07-20 107 views
1

我正在使用jquery文件上传插件。 here阅读由控制器返回的json数据Rails

我上传文件并生成一个JSON响应如下:

@upload = Upload.new(params[:upload]) 
    respond_to do |format| 
     if @upload.save 
     format.json {render :json => [ @upload.to_jq_upload ].to_json} 
     end 

我想这样做的就是从JSON对象的信息时,它被发回,但我想不出它在哪里发送。任何人都可以帮助弄清楚如何获取这些信息?

还有一个在我的application.js一个回调函数如下:

$('#fileupload').bind('fileuploaddone', function (e, data) { } 

我看了看这个数据,我无法弄清楚如何解析它。如果我做data.url它给我的网址删除没有ID,所以这是上传数据。我想要的是解析返回的数据。 data.result例如,但这只是给我对象对象。

任何帮助,将不胜感激。

这里是视图:

<div id="fileupload"> 
    <%= form_for @upload, :html => { :multipart => true } do |f| %> 
     <div class="fileupload-buttonbar"> 
      <label class="fileinput-button"> 
       <span>Add files... or drop them to upload</span> 
       <%= f.file_field :photo, :id => "upload_photo" %>     
      </label> 
     </div> 
    <% end %> 
    <div class="fileupload-content"> 
     <table class="files"></table> 
     <div class="fileupload-progressbar"></div> 
    </div> 
</div> 

<script id="template-upload" type="text/x-jquery-tmpl"> 
    <tr class="template-upload{{if error}} ui-state-error{{/if}}"> 
     <td class="preview"></td> 
     <td class="name">${name}</td> 
     <td class="size">${sizef}</td> 
     {{if error}} 
      <td class="error" colspan="2">Error: 
       {{if error === 'maxFileSize'}}File is too big 
       {{else error === 'minFileSize'}}File is too small 
       {{else error === 'acceptFileTypes'}}Filetype not allowed 
       {{else error === 'maxNumberOfFiles'}}Max number of files exceeded 
       {{else}}${error} 
       {{/if}} 
      </td> 
     {{else}} 
      <td class="progress"><div></div></td> 
      <td class="start"><button>Start</button></td> 
     {{/if}} 
     <td class="cancel"><button>Cancel</button></td> 
    </tr> 
</script> 
<script id="template-download" type="text/x-jquery-tmpl"> 
    <tr class="template-download{{if error}} ui-state-error{{/if}}"> 
     {{if error}} 
      <td></td> 
      <td class="name">${name}</td> 
      <td class="size">${sizef}</td> 
      <td class="error" colspan="2">Error: 
       {{if error === 1}}File exceeds upload_max_filesize (php.ini directive) 
       {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive) 
       {{else error === 3}}File was only partially uploaded 
       {{else error === 4}}No File was uploaded 
       {{else error === 5}}Missing a temporary folder 
       {{else error === 6}}Failed to write file to disk 
       {{else error === 7}}File upload stopped by extension 
       {{else error === 'maxFileSize'}}File is too big 
       {{else error === 'minFileSize'}}File is too small 
       {{else error === 'acceptFileTypes'}}Filetype not allowed 
       {{else error === 'maxNumberOfFiles'}}Max number of files exceeded 
       {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size 
       {{else error === 'emptyResult'}}Empty file upload result 
       {{else}}${error} 
       {{/if}} 
      </td> 
     {{else}} 
      <td class="preview"> 
       {{if thumbnail_url}} 
        <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a> 
       {{/if}} 
      </td> 
      <td class="name"> 
       <a href="${url}"{{if thumbnail_url}} target="_blank"{{/if}}>${name}</a> 
      </td> 
      <td class="size">${sizef}</td> 
      <td colspan="2"></td> 
     {{/if}} 
     <td class="delete"> 
      <button data-type="${delete_type}" data-url="${delete_url}">Delete</button> 
     </td> 
    </tr> 
</script> 

回答

1

我不熟悉的红宝石。但是,在fileuploaddone绑定中,“数据”对象包含要直接解析或访问的数据。

data.jqXHR.responseText应该包含返回数据的json字符串。有了这一点,你可以(在Javascript至少)请拨打以下(取决于你有什么JSON)来获得JSON对象:

jQuery.parseJSON(data.jqXHR.responseText) 

- 或 -

JSON.parse(data.jqXHR.responseText) 

或者(和更容易),您可以检查,看看是否data.result是有效的。如果是这样,它看起来是这样的:

[对象{名= “image.jpg的”,大小= 43554,类型= “图像/ JPEG”,更...}]

要访问文件名称(例如),你将通过获得它:

data.result [0]。名称

希望这有助于。

0

请在您的控制器中尝试此操作。

render :json => { files: [@upload.to_jq_upload] }