0

Rails アプリで優れた jQuery File Upload を使用して、複数の画像をアップロードしたいと考えています。

だから私はそれについて Railscasts に従いました:

  • jquery-fileupload-rails gemを追加する
  • 私のapplication.jsに必要なものを追加してください
  • 写真用のフォームを作成する
  • 「housings.coffee」というファイルで FileUpload を初期化します。

しかし、ドラッグ アンド ドロップを使用するか、[ファイルを追加...] をクリックして複数の画像をアップロードしようとしても、なぜ何も起こらないのかわかりません。

「送信」ボタンを押すと、各画像は正常に保存されます。

助けてください。私は本当に立ち往生しています。

どうもありがとう！

application.js ```

//= require jquery
//= require jquery_ujs
//= require jquery-fileupload/basic
//= require housings

ハウジング.コーヒー

$(document).ready( ->
  jQuery ->
    file = $('fileupload').fileupload
    console.log(file)
)

ハウジング/_form.html.erb

<%= form_for [@user, @picture], html: { multipart: true, id: 'fileupload'} do |f| %>
      <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
      <div class="row fileupload-buttonbar">
        <div class="span7">
          <!-- The fileinput-button span is used to style the file input field as button -->
          <span class="btn btn-success fileinput-button">
            <i class="icon-plus icon-white"></i>
            <span>Add files...</span>
            <%= f.file_field :image, multiple: true, name: 'picture[image]' %>
          </span>
            <%= f.hidden_field :housing_id, value: @housing.id %>
          <button type="submit" class="btn btn-primary start">
            <i class="icon-upload icon-white"></i>
            <span>Start upload</span>
          </button>
          <button type="reset" class="btn btn-warning cancel">
            <i class="icon-ban-circle icon-white"></i>
            <span>Cancel upload</span>
          </button>
          <!--<button type="button" class="btn btn-danger delete">-->
            <!--<i class="icon-trash icon-white"></i>-->
            <!--<span>Delete</span>-->
          <!--</button>-->
          <input type="checkbox" class="toggle">
        </div>
        <div class="span5">
          <!-- The global progress bar -->
          <div class="progress progress-success progress-striped active fade">
            <div class="bar" style="width:0%;"></div>
          </div>
        </div>
      </div>
      <!-- The loading indicator is shown during image processing -->
      <div class="fileupload-loading"></div>
      <br>
      <!-- The table listing the files available for upload/download -->
      <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody>
      </table>
  <% end %>

Housings_controller.rb > インデックス

@picture = Picture.new(housing_id: @user.housings.first.id)
4

1 に答える 1

0

これが誰かに役立つかどうかはわかりませんが、別の JavaScript ツールDropzoneを実装することになりました。

FileUpload は今ではかなり古いように見え、それを機能させようとして頭痛がしたので、もっと良いと思いました。

Dropzone は Rails と完全に連携し、見た目も美しいです。参考として、このチュートリアルに従いました。

于 2015-12-07T15:35:11.937 に答える