twitter-bootstrap - jasny fileupload 元素，无法将其用于编辑操作

Question

我正在尝试使用来自 jasny-bootstrap 的文件上传进行编辑操作。有一些使用过的页面已登录，他/她已经上传了图像，我希望能够呈现它们以便用户更改或删除。

正在使用以下内容

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-exists 类而不是 fileupload-new，我试过了并且它在编辑模式下显示了表单。但是没有显示来自源的图像，请指教

问候，

Answer 1

将图像添加为预览(因此在 .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>​

同时检查这个 fiddle :http://jsfiddle.net/GR2Lt/

附言您目前必须点击“删除”两次。这将在下一个版本中修复。