新手问题 jquery file upload 上传 rails 回应有问题

kikyous · 2012年07月17日 · 最后由 kikyous 回复于 2012年07月17日 · 5572 次阅读
class Upload < ActiveRecord::Base
  belongs_to :user
  attr_accessible :picture

  has_attached_file :picture, :styles => { :thumb =>  { :geometry => 'x60',
                                                         :quality => 70,
                                                         :format => 'JPG'}
                                       }
  validates_attachment_presence :picture
  validates_attachment_size :picture, :less_than => 5.megabytes
  validates_attachment_content_type :picture, :content_type => [ 'image/jpeg', 'image/png', 'image/pjpeg' ]

end
class UploadsController < ApplicationController

  def create
    p params[:upload]
    upload = current_user.uploads.new(params[:upload])
    if upload.save
      render :json => { :pic_path => upload.picture.url.to_s , :name => upload.picture.instance.attributes["picture_file_name"] }, :content_type => 'text/html'
    else
      #todo handle error
      render :json => { :result => 'error'}, :content_type => 'text/html'
    end
  end

index.html.erb


    <%= form_for current_user.uploads.build, :html => { :id => "fileupload", :multipart => true } do |f| %>
            <%= file_field_tag 'upload[picture]', :multiple => true %>
    <% end %>

<script>
    $(function () {
      $('#fileupload').fileupload({
        done: function (e, data) {
          console.log(data);
        },
        start: function (e) {
          console.log("starting");
        },
      });
    });

  </script>

现在一次上传两个文件。 console.log(data); 打印出来的两个对象是正确的,像这样

Object
_bitrateTimer: $.widget._BitrateTimer
_time: 1342493041999
add: function (e, data) {
bitrate: 6035468.671679198
bitrateInterval: 500
blob: null
cache: false
contentType: false
data: FormData
disabled: false
done: function (e, data) {
dropZone: e.fn.e.init[1]
fileInput: e.fn.e.init[1]
files: Array[1]
forceIframeTransport: false
form: e.fn.e.init[1]
formData: function (form) {
jqXHR: Object
lengthComputable: true
loaded: 301019
multipart: true
namespace: "fileupload"
originalFiles: Array[2]
paramName: Array[1]
processData: false
progressInterval: 100
recalculateProgress: true
replaceFileInput: true
result: "{"pic_path":"/system/uploads/pictures/000/000/032/original/562c11dfa9ec8a131c35c958f703918fa0ecc05f.jpg?1342493042","name":"562c11dfa9ec8a131c35c958f703918fa0ecc05f.jpg"}"
sequentialUploads: false
singleFileUploads: true
start: function (e) {
submit: function () {
textStatus: "success"
total: 301019
type: "POST"
uploadedBytes: 0
url: "http://localhost:3000/uploads"
xhr: function () {
__proto__: Object

但是一访问 data.result.name 就是 undefined 而且 firebug 上 network 上看到的两次 post 返回的 json 都是一样的,都是第二个文件的信息。

你这个 result 返回的数据不对,你没发现引号多了?

这个东西在 IE 下表现不是很好...

#1 楼 @chinacheng 但是用 data.result 打印出来是正确的啊

{"pic_path":"/system/uploads/pictures/000/000/039/original/562c11dfa9ec8a131c35c958f703918fa0ecc05f.jpg?1342495957","name":"562c11dfa9ec8a131c35c958f703918fa0ecc05f.jpg"} 

而且

render :json => { :pic_path => upload.picture.url.to_s , :name => upload.picture.instance.attributes["picture_file_name"] }, :content_type => 'text/html'

不会有错的啊

#1 楼 @chinacheng 把,:content_type => 'text/html'去掉就好了,虽然在 firebug network 看到的返回还是两个一样的,但是 data.result.name 总算正常了

render :json => { :pic_path => upload.picture.url.to_s , :name => upload.picture.instance.attributes["picture_file_name"] }
result: "{"pic_path":"/system/uploads/pictures/000/000/032/original/562c11dfa9ec8a131c35c958f703918fa0ecc05f.jpg?1342493042","name":"562c11dfa9ec8a131c35c958f703918fa0ecc05f.jpg"}"

这个对么?你拿 firebug 试一下

没看到,竟然还有这么一个参数 :content_type => 'text/html'

#5 楼 @chinacheng SyntaxError: Unexpected identifier

#5 楼 @chinacheng 再问一下,jquery file upload 没有设置自动上传,但为什么一选择文件他就自动开始上传呢?

#7 楼 @kikyous 你这是用了一个插件吧,你去看看他的 api,我猜是他默认自动上传,你要是不需要自动上传的话,估计要设置一下什么参数吧

需要 登录 后方可回复, 如果你还没有账号请 注册新账号