Bootstrap文件上传+ Django表单

时间:2013-09-27 19:55:06

标签: django image forms twitter-bootstrap field

您好我正在尝试自定义我的django表单并添加file upload widget from Jasny Bootstrap。但是,它似乎没有起作用..

 <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">{{ wizard.form.main_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>

任何想法我做错了什么?我把{{ wizard.form.main_image }}放在了错误的地方吗?

1 个答案:

答案 0 :(得分:1)

<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 an Image</span><span class="fileupload-exists">Change</span>
   {{ wizard.form.main_image }}</span>
   <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
   </div>
</div>