文件上传

Question

我有一个rails 4应用程序，我使用jQuery文件上传发送请求到载波。我的代码看起来是：

<input name='photo[image]' type='file' data-url='photos/create' multiple="true" class='fileupload'/>

我的jquery：

$('.fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
      $.each(data.result.files, function (index, file) {
        alert(file.name);
      });
    }
});

我在照片控制器中的创作动作：

def create
@photo = Photo.new(photo_params)

respond_to do |format|
  if @photo.save
    format.json { render json: @photo }
  else
    format.json { render json: @photo.errors, status: :unprocessable_entity }
  end
end
end

private
   def photo_params
     params.require(:photo).permit!
   end

我的照片模特：

class Photo < ActiveRecord::Base
  mount_uploader :image, ImageUploader
end

当我创建一张照片时，载波正在正确地创建一个图像(在公共/上传目录中)，但是由于某种原因，我的jQuery出现了错误：

Uncaught TypeError: Cannot read property 'length' of undefined

我不知道是什么导致了这一切？

Answer 1

我应该把这个作为评论，但我没有足够的声誉，所以我很抱歉。

我认为你只需要使用data.files而不是data.result.files

像这样

$('.fileupload').fileupload({
    dataType: 'json',
    done: function (e, data) {
      $.each(data.files, function (index, file) {
        alert(file.name);
      });
    }
});

Answer 2

在我看来，您响应的json没有done回调所期望的结构。由于它是在data.result.files上调用data.result.files，所以我认为响应的结构应该更像这样：

render json: {result: { files: [@photo] } }。

还可以尝试调试通过将数据记录到回调中的javascript控制台返回的数据。

done: function(e, data) { console.log(data) }

Answer 3

data对象的结构将results字段param显示为一个保存与文件无关的各种字段的对象；因此，data.result.files会导致.each()出错。

使用以下方法：

$.each(data.files, function (index, file) {
   alert(file.name);
});

工作演示 (删除服务器端代码以捕获对象，只需修改上面的代码)。