2012-11-28 35 views
3

我試圖從jasny-bootstrap中使用fileupload進行編輯操作。有些頁面在使用過程中已經登錄,他/她已經上傳了圖片,我希望能夠渲染它們以便用戶更改或刪除。jasny 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-exists類而不是fileupload-new,我試過了,它在編輯模式下顯示窗體。但是從源圖像不顯示,請指教

問候,

回答

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/

附:您目前必須點擊「刪除」兩次。這將在下一個版本中修復。

+0

謝謝你解決了我的問題。我可以直接從存儲庫中雙擊刪除按鈕,還是不推送? –

+0

是的,您可以使用WIP分支。 https://github.com/jasny/bootstrap/blob/2.2.2-j3-wip/js/bootstrap-fileupload.js –

+0

該解決方案對我無效。我有一個控制,用戶不能空白「上傳照片」字段。即使我這樣做,我會得到「沒有選擇文件」的錯誤 – FreshPro