bootstrap文件上傳與圖像預覽

我試圖用bootstrap做文件上傳，但我不知道我在做什麼，所以有人可以告訴我如何做到這一點，以及如何獲得上傳圖像預覽作爲文件上傳是爲了將圖像上傳到我的網站上。這是我到目前爲止在HTML中。bootstrap文件上傳與圖像預覽

<form class="form-horizontal" enctype="multipart/form-data"> 
    <div class="form-group"> 
     <label class="control-label col-sm-2">Pic Name:</label> 
     <div class="col-xs-4"> 
      <input type="text" class="form-control" name="profilepicname"></input> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2">Upload Pic:</label> 
     <div class="col-xs-3"> 
      <input type="file" name="profilepic"></input> 
     </div> 
    </div> 
</form>

此外，在網頁上命名圖片和文件上傳部分之間還有很大的空間。我如何擺脫這個？

來源

2015-12-09 jcwalker2006

你可以發佈小提琴伴侶嗎？ –

Jasny Bootstrap，一個第三方Bootstrap組件庫，允許您關閉。

請參閱documentation。

編輯根據此代碼：

<div class="fileinput fileinput-new" data-provides="fileinput"> 
    <div class="fileinput-preview thumbnail" data-trigger="fileinput" style="width: 200px; height: 150px;"></div> 
    <div> 
    <span class="btn btn-default btn-file"><span class="fileinput-new">Select image</span><span class="fileinput-exists">Change</span><input type="file" name="..."></span> 
    <a href="#" class="btn btn-default fileinput-exists" data-dismiss="fileinput">Remove</a> 
    </div> 
</div>

來源

2015-12-09 08:00:35

這是否需要額外的jQuery，因爲它不適合我？ – jcwalker2006

圖像上傳形式預覽，自舉並沒有額外的CSS內置的一個例子，它使用jQuery的AJAX來查詢一個PHP腳本負責上傳：

來源

2016-03-09 18:13:39 ShinDarth

非常感謝你，它幫了我很多 –

bootstrap文件上傳與圖像預覽

回答

相關問題