我有这样的观点(形式偏):
= javascript_include_tag 'car_photos' = stylesheet_link_tag('jquery.fileupload-ui') = form_for @car do |f| - if @car.errors.any? #error_explanation %h2= "?????? ? ?????: #{pluralize(@car.errors.count, "error")}" %ul - @car.errors.full_messages.each do |msg| %li= msg .tab#car-data{style: "height: 1290px;"} .field = f.label :manufacturer_id, "?????" = f.select(:manufacturer_id, options_from_collection_for_select(VehicleManufacturer.all, :id, :name, @car.manufacturer_id), {}, :prompt => "???????? ?????", required: true, id: "manufacturer-select") .field = f.label :model_id, "??????" #models-area = render :partial => 'models', :object => @models .actions = link_to '??????? ? ???????? ??????????', "", id: "go-and-load-photos", remote: true .tab#car-photo{style: "height: 1290px;"} .actions = link_to '????? ? ????????', "", id: "go-and-load-car-data", remote: true .actions = f.submit '????????', id: "submit-car" .car-photo = form_for CarPhoto.new, :html => { :multipart => true, :id => "fileupload", remote: true } do |f| .row.fileupload-buttonbar %span.fileinput-button %span ???????? ????? = f.file_field :car_photo, multiple: true = tag(:input, :type => "hidden", :name => request_forgery_protection_token.to_s, :value => form_authenticity_token) %button.btn.btn-primary.start{type: "submit", remote: true} %span ????????? %button.btn.btn-warning.cancel{type: "reset", remote: true} %span ???????? ???????? %button.btn.btn-danger.delete{type: "button", remote: true} %span ??????? %input.toggle{type: "checkbox"}/ %table.table.table-striped %tbody.files{"data-target" => "#modal-gallery", "data-toggle" => "modal-gallery"} :javascript var fileUploadErrors = { maxFileSize: '?????? ????? ??????? ?????', minFileSize: '?????? ????? ??????? ???', acceptFileTypes: '?????????? ????? ?? ??????????????', maxNumberOfFiles: '???????? ????? ??????', uploadedBytes: 'Uploaded bytes exceed file size', emptyResult: '???? ?? ??? ????????' }; / The template to display files available for upload %script#template-upload{type: "text/x-tmpl"} {% for (var i=0, file; file=o.files[i]; i++) { %}{% } %} / The template to display files available for download %script#template-download{type: "text/x-tmpl"} {% for (var i=0, file; file=o.files[i]; i++) { %} {%=file.name%} {%=o.formatFileSize(file.size)%} {% if (file.error) { %}{%=locale.fileupload.error%} {%=locale.fileupload.errors[file.error] || file.error%} {% } else if (o.files.valid && !i) { %}{% if (!o.options.autoUpload) { %} {% } %} {% } else { %}{% } %} {% if (!i) { %} {% } %} {% if (file.error) { %} {% } %} %script{charset: "utf-8", type: "text/javascript"} $(function () { \// Initialize the jQuery File Upload widget: $('#fileupload').fileupload(); \// \// Load existing files: $.getJSON($('#fileupload').prop('action'), function (files) { var fu = $('#fileupload').data('fileupload'), template; fu._adjustMaxNumberOfFiles(-files.length); console.log(files); template = fu._renderDownload(files) \.appendTo($('#fileupload .files')); \// Force reflow: fu._reflow = fu._transition && template.length && template[0].offsetWidth; template.addClass('in'); $('#loading').remove(); }); });{%=file.name%} {%=o.formatFileSize(file.size)%} {%=locale.fileupload.error%} {%=locale.fileupload.errors[file.error] || file.error%} {% } else { %}{% if (file.thumbnail_url) { %} {% } %} {%=file.name%} {%=o.formatFileSize(file.size)%} {% } %}
正如你所看到我尝试上传多个图像,控制器是这样的:
class CarPhotosController < ApplicationController before_action :set_car_photo, only: [:show, :edit, :update, :destroy] def new @car_photo = CarPhoto.new end def create #binding.pry @car_photo = CarPhoto.new(car_photo: car_photo_params[:car_photo].first) #binding.pry #@car_photo.user_id = current_user.id respond_to do |format| if @car_photo.save #&& user_signed_in? format.html { redirect_to @car_photo, notice: 'Photo was successfully created.' } format.json { data = {id: @car_photo.id, thumb: view_context.image_tag(@car_photo.car_photo.url(:thumb))} render json: data, status: :created, location: @car_photo } else format.html { render action: "new" } format.json { render json: @car_photo.errors, status: :unprocessable_entity } end end end private # Use callbacks to share common setup or constraints between actions. def set_car_photo @car_photo = CarPhoto.find(params[:id]) end # Never trust parameters from the scary internet, only allow the white list through. def car_photo_params params.require(:car_photo).permit(:car_photo, {:car_photo => []}) end end
当我在chrome日志中提交一些图像时,我看到,该服务器返回这样的json:
{"id":31,"thumb":"\u003Cimg alt=\"1\" src=\"/system/car_photos/car_photos/000/000/031/thumb/1.jpg?1394785415\" /\u003E"}
并在db中我看到它已保存,但为什么在视图中我得到:
Error Empty file upload result
我做错了什么?以及如何解决?
jquery-file-upload
库需要特定格式的JSON响应:https://github.com/blueimp/jQuery-File-Upload/wiki/JSON-Response
这可能是问题所在.
顺便说一句,请不要按照你的方式发送响应,我的意思是,不要在你的控制器中调用view方法.要么只发送响应中的url并在fileUpload回调中添加标记,要么在视图中呈现它(例如使用
jbuilder
gem)