jquery fileupload rails预览文件不起作用

时间:2015-04-07 04:02:36

标签: jquery ruby-on-rails haml jquery-file-upload jquery-fileupload-rails

我正在尝试使用jquery-fileupload-rails gem上传jquery文件。按照此示例https://github.com/tors/jquery-fileupload-rails-paperclip-example我创建了一个视图

= bootstrap_form_for(@media_item, :html => {:multipart => true, :id => "fileupload"}, layout: :horizontal, label_col: "col-sm-2", control_col: "col-sm-10") do |f|
  = f.text_field :description
  .row.fileupload-buttonbar
    .col-md-7
      %span.btn.btn-success.fileinput-button
        %i.glyphicon.glyphicon-plus
        /= f.file_field :file, multiple: true, label: false
        %span Add files
        = file_field_tag :file, multiple: true
      %button.btn.btn-primary.start{type: 'submit'}
        %i.glyphicon.glyphicon-upload
        %span= t(:upload_button_text)
      %button.btn.btn-warning.cancel{type: 'reset'}
        %i.glyphicon.glyphicon-ban-circle
        %span= "Cancel"
      %button.btn.btn-danger.delete{type: 'button'}
        %i.glyphicon.glyphicon-trash
        %span= "Delete"
      %input.toggle{type: 'checkbox'}
        / The global file processing state
        %span.fileupload-process

    .col-md-5
      .progress.progress-striped.active{'aria-valuemax' => '100', 'aria-valuemin' => '0', role: 'progressbar'}
        .progress-bar.progress-bar-success{style: 'width:0%;'}
      / The extended global progress state
      .progress-extended  

  .fileupload-loading
  %table.table.table-striped{"role" => "presentation"}
    %tbody.files

: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.template-upload.fade
    %td.preview
      %span.fade
    %td.name
      %span {%=file.name%}
    %td.size
      %span {%=o.formatFileSize(file.size) %}
    {% if (file.error) { %}
    %td.error{:colspan => "2"}
      %span.label.label-important {%=locale.fileupload.error%}
      {%=locale.fileupload.errors[file.error] || file.error%}
    {% } else if (o.files.valid && !i) { %}
    %td
      .progress.progress-success.progress-striped.active
        .bar{:style => "width:0%;"}
    %td.start
      {% if (!o.options.autoUpload) { %}
      %button.btn.btn-primary
        %i.icon-upload.icon-white
        %span {%=locale.fileupload.start%}
      {% } %}
    {% } else { %}
    %td{:colspan => "2"}
    {% } %}
    %td.cancel
      {% if (!i) { %}
      %button.btn.btn-warning
        %i.icon-ban-circle.icon-white
        %span {%=locale.fileupload.cancel%}
      {% } %}
  {% } %}

/ 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.template-download.fade
    {% if (file.error) { %}
    %td
    %td.name
      %span {%=file.name%}
    %td.size
      %span {%=o.formatFileSize(file.size)%}
    %td.error{:colspan => "2"}
      %span.label.label-important {%=locale.fileupload.error%}
      {%=locale.fileupload.errors[file.error] || file.error%}
    {% } else { %}
    %td.preview
      {% if (file.thumbnail_url) { %}
      %a{:download => "{%=file.name%}", :href => "{%=file.url%}", :rel => "gallery", :title => "{%=file.name%}"}
        %img{:src => "{%=file.thumbnail_url%}"}/
      {% } %}
    %td.name
      %a{:download => "{%=file.name%}", :href => "{%=file.url%}", :rel => "{%=file.thumbnail_url&&'gallery'%}", :title => "{%=file.name%}"} {%=file.name%}
    %td.size
      %span {%=o.formatFileSize(file.size)%}
    %td{:colspan => "2"}
    {% } %}
    %td.delete
      %button.btn.btn-danger{"data-type" => "{%=file.delete_type%}", "data-url" => "{%=file.delete_url%}"}
        %i.icon-trash.icon-white
        %span {%=locale.fileupload.destroy%}
      %input{:name => "delete", :type => "checkbox", :value => "1"}
  {% } %}

%script{:charset => "utf-8", :type => "text/javascript"}
  $(function () {
  $('#fileupload').fileupload();
  \//
  \// Load existing files:
  $.getJSON($('#fileupload').prop('action'), function (files) {
  var fu = $('#fileupload').data('blueimpFileupload'),
  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();
  });

  });

但是当我通过单击按钮添加文件时,它不会出现在下面(files queue to upload中)。 我在页面加载的js控制台中收到错误SyntaxError: missing ) after argument list tmpl.js:1:1474

可能出现什么问题?

0 个答案:

没有答案