2
나는 그런보기 (부분 형성)가 : 당신은 내가 여러 이미지를 업로드하려고 볼 수 있듯이JQuery와 파일 업로드 레일 "오류 빈 파일 업로드 결과"
= 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++) { %}
<tr class="template-upload fade">
<td class="preview"><span class="fade"></span></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
{% if (file.error) { %}
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else if (o.files.valid && !i) { %}
<td>
</td>
<td class="start">{% if (!o.options.autoUpload) { %}
<button class="btn btn-primary">
<span>Загрузить</span>
</button>
{% } %}</td>
{% } else { %}
<td colspan="2"></td>
{% } %}
<td class="cancel">{% if (!i) { %}
<button class="btn btn-warning">
<span>Отменить загрузку</span>
</button>
{% } %}</td>
</tr>
{% } %}
/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++) { %}
<tr class="template-download fade">
{% if (file.error) { %}
<td></td>
<td class="name"><span>{%=file.name%}</span></td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
{% } else { %}
<td class="preview">{% if (file.thumbnail_url) { %}
<a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
{% } %}</td>
<td class="name">
<a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
</td>
<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
<td colspan="2"></td>
{% } %}
<td class="delete">
<button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
<span>Удалить</span>
</button>
<input type="checkbox" name="delete" value="1">
</td>
</tr>
{% } %}
%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
와 내가 볼 크롬 로그에 어떤 이미지를 제출할 때 해당 서버 반환 등 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
내가 뭘 잘못 했니? 어떻게 해결할 수 있을까요? https://github.com/blueimp/jQuery-File-Upload/wiki/JSON-Response
이 문제가 될 수 있습니다
"그런데 응답을 보내지 마십시오. 귀하의 컨트롤러에서 호출 방법을 호출 할 수 있습니다. 그냥 URL을 보내 응답을 보내고 태그를 fileUpload 콜백에 추가하거나보기에서 렌더링하십시오 (예 : jbuilder gem 사용) "이해하지 못했을 때 코드를 입력하십시오) – brabertaser19
예. 귀하의 컨트롤러에는 다음과 같은 것이 있습니다 : 'format.json {data = {id : @ car_photo.id, thumb : view_context.image_tag (@ car_photo.car_photo.url (: thumb))' 이것은 나쁜 습관입니다. . 'image_tag' 메쏘드는 뷰에 속하며 컨트롤러에서 사용되어서는 안됩니다. – arnvald
그래서 가능한 해결책은 다음 중 하나를 수행하는 것입니다. 'format.json {data = {thumb : @ car_photo.car_photo.url (: thumb)}}'그리고 나중에 Javascript frontend에서 처리하거나'format.json' 뷰 정보를 저장하는'car_photos/create.json.jbuilder'와 같은 파일이 있습니다. 사실이 두 가지를 결합하는 것이 가장 좋은 방법입니다.보기 파일을 사용하고 ''태그가 아닌 그냥 URL을 넣고 나중에 자바 스크립트에 ''을 추가하십시오. 아직 명확하지 않은 경우 알려주세요 – arnvald