当前位置:  开发笔记 > 编程语言 > 正文

jquery文件上传rails"错误清空文件上传结果"

如何解决《jquery文件上传rails"错误清空文件上传结果"》经验,为你挑选了1个好方法。

我有这样的观点(形式偏):

= 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++) { %}
  
  
  {%=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) { %}
  
  {% } %}
  
  {% } %}
/ 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++) { %}
  
  {% if (file.error) { %}
  
  {%=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)%}
  
  {% } %}
  
  
  
  
  
  {% } %}
%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();
  });

  });

正如你所看到我尝试上传多个图像,控制器是这样的:

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  

我做错了什么?以及如何解决?



1> Gregory Wite..:

jquery-file-upload库需要特定格式的JSON响应:https://github.com/blueimp/jQuery-File-Upload/wiki/JSON-Response

这可能是问题所在.

顺便说一句,请不要按照你的方式发送响应,我的意思是,不要在你的控制器中调用view方法.要么只发送响应中的url并在fileUpload回调中添加标记,要么在视图中呈现它(例如使用jbuildergem)

推荐阅读
李桂平2402851397
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有