1
나는 Rails 초보자입니다.jQuery 파일 업로드 플러그인 레일
BlueImp의 jQuery-File-Upload 플러그인을 Rails 4 앱에 구현하려고합니다. 그래서 기본적인 파일 업로드 작업이 있지만 여러 문제가 있습니다. 우선, 업로드 페이지에 이상한 UI가 표시됩니다.
업로드 시작 및 취소 버튼 만 표시됩니다. 그럼에도 보이지 않는 "파일 추가"버튼이 페이지 절반을 차지하고 있기 때문에 나는 그들을 클릭 할 수 없습니다. 단지 파일을 업로드 할 수 있습니다. 보이지 않는 "파일 추가"버튼을 클릭하고 파일을 선택하고 탭을 두 번 누르면 업로드 시작 버튼을 강조 표시 한 다음 Enter 키를 누릅니다. 일단 업로드되면 특정 페이지로 이동하는 대신 파일 업로드의 매개 변수를 표시하는 페이지로 이동합니다. 그러나 파일이 업로드됩니다. 나는 그림을 올릴 것이다. 그러나 나는 명백하게 할 수 없다. 어떤 도움이라도 대단히 감사하겠습니다.
다음은 video_resources보기의 _form.html.haml 파일입니다. 아마 html에서 haml 로의 변환이 문제가 될 수도 있습니다.
= form_for VideoResource.new, :html => {:multipart => true, :id => "fileupdload" } do |f|
.row.fileupload-buttonbar
.span7
%span.btn.btn-success.fileinput-button
%i.icon-plus.icon-white
%span Add files...
= f.file_field :file_path
%button.btn.btn-primary.start{:type => "submit"}
%i.icon-upload.icon-white
%span Start upload
%button.btn.btn-warning.cancel{:type => "reset"}
%i.icon-ban-circle.icon-white
%span Cancel upload
%button.btn.btn-danger.delete{:type => "button"}
%i.icon-trash.icon-white
%span Delete
%input.toggle{:type => "checkbox"}/
.span5
.progress.progress-success.progress-striped.active.fade
.bar{:style => "width:0%;"}
.fileupload-loading
%br/
%table.table.table-striped
%tbody.files{"data-target" => "#modal-gallery", "data-toggle" => "modal-gallery"}
:javascript
var fileUploadErrors = {
maxFileSize: 'File is too big',
minFileSize: 'File is too small',
acceptFileTypes: 'Filetype not allowed',
maxNumberOfFiles: 'Max number of files exceeded',
uploadedBytes: 'Uploaded bytes exceed file size',
emptyResult: 'Empty file upload result'
};
/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>
<div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
</td>
<td class="start">{% if (!o.options.autoUpload) { %}
<button class="btn btn-primary">
<i class="icon-upload icon-white"></i>
<span>{%=locale.fileupload.start%}</span>
</button>
{% } %}</td>
{% } else { %}
<td colspan="2"></td>
{% } %}
<td class="cancel">{% if (!i) { %}
<button class="btn btn-warning">
<i class="icon-ban-circle icon-white"></i>
<span>{%=locale.fileupload.cancel%}</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%}">
<i class="icon-trash icon-white"></i>
<span>{%=locale.fileupload.destroy%}</span>
</button>
<input type="checkbox" name="delete" value="1">
</td>
</tr>
{% } %}
/The jQuery UI widget factory, can be omitted if jQuery UI is already included
= javascript_include_tag 'jquery.ui.widget.js'
/The Templates and Load Image plugins are included for the FileUpload user interface
%script{:src => "http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"}
%script{:src => "http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"}
/The Iframe Transport is required for browsers without support for XHR file uploads
= javascript_include_tag 'jquery.iframe-transport.js'
= javascript_include_tag 'jquery.fileupload.js'
= javascript_include_tag 'jquery.fileupload-ui.js'
/add include_tag js files to config.assets.precompile in ...environments/production.rb if you have it in vendor/ assets
%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('blueimp-fileupload'),
template;
fu._adjustMaxNumberOfFiles(-files.length);
template = fu._renderDownload(files)
\.appendTo($('#fileupload .files'));
\// Force reflow:
fu._reflow = fu._transition && template.length &&
template[0].offsetWidth;
template.addClass('in');
$('#loading').remove();
});
});