3

編集操作にjasny-bootstrapからのfileuploadを使用しようとしています。使用済みのページがログインしていて、すでに画像をアップロードしているので、ユーザーが変更または削除できるように画像をレンダリングできるようにしたいと思います。

以下を使用しています

http://jasny.github.com/bootstrap/javascript.html#fileupload

次のスニペットで

<div class="fileupload fileupload-new" data-provides="fileupload">
  <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
  <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
  <div>
    <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>

新しい画像では完全に機能しますが、既存の画像をレンダリングするにはどうすればよいですか？マニュアルでは、fileupload-newの代わりにfileupload-existsクラスを使用する必要があると書かれています。これを試したところ、編集モードでフォームが表示されます。ただし、ソースからの画像は表示されません。アドバイスしてください

よろしく、

4

1 に答える 1

4

画像をプレビューとして追加し（のように.fileupload-preview）、トップクラスをに変更し.fileupload-existsます。

<div class="fileupload fileupload-exists" data-provides="fileupload">
  <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
    <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
  </div>
  <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
     <img src="http://jasny.github.com/bootstrap/assets/img/extended-by-jasny.png">
  </div>
  <div>
    <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
  </div>
</div>​

このフィドルも確認してください：http：//jsfiddle.net/GR2Lt/

PS現在、[削除]を2回クリックする必要があります。これは次のバージョンで修正される予定です。

于 2012-12-20T22:27:43.050 に答える