Twitter Bootstrap FileUpload

Question

我想使用bootstrap-fileupload.js（http://jasny.github.com/bootstrap/javascript.html#fileupload），但我對事件觸發器感到困惑。

一旦選擇了媒體資產，我怎樣才能觸發發送圖像到網頁腳本的事件（例如php）？

Answer 1

我建議您使用https://github.com/blueimp/jQuery-File-Upload進行文件上傳。

Answer 2

我偶然發現了類似的問題，我想在用戶瀏覽/選擇圖像後立即通過AJAX請求上傳圖像，並使用保存的圖像ID更新隱藏字段。我找不到bootstrap-fileupload.js的解決方案。所以下面的方法爲我工作。

<script type="text/javascript" src="http://malsup.github.com/jquery.form.js"></script> 
<script type="text/javascript"> 
var options = { 
     success:  showResponse // post-submit callback 
    }; 
    $(document).ready(function() 
    { 
     $('#photoimg').live('change', function() 
     { 
      $("#imageform").ajaxForm(options).submit();   
     }); 
    }); 

    function showResponse(responseText, statusText, xhr, $form) { 
     $('#photoUrl').val(responseText); 
    } 
</script> 

圖像格式：（不能是嵌套表格！）

<form id="imageform" action="${pageContext.request.contextPath}/app/upload/saveimage" method="post" enctype="multipart/form-data"> 
       <div style="top: 25px"> 
       <div class="span6" style="margin-top: -545px; margin-left:680px"> 
       <div class="control-group"> 
       <label class="control-label " style="text-align: left">Photo: </label> 
       <div data-fileupload="image" class="fileupload fileupload-new"> 
        <div style="margin-left:-235px ;width: 150px; height: 150px; line-height: 150px;" class="fileupload-preview thumbnail" ></div> 
        <div> 
         <span class="btn btn-file" style="margin-right: 135px"><span class="fileupload-new" >Select image</span><span class="fileupload-exists">Change</span><input type="file" name="fileData" id="photoimg"/></span> <a data-dismiss="fileupload" class="btn fileupload-exists" href="#" style="margin-left: -75px">Remove</a> 
        </div> 
       </div> 
       </div> 

       </div> 
       </div> 
      </form> 

<input type="hidden" name="individualCustomer.personInfo.photoUrl" id="photoUrl" /> 

Answer 3

您可以使用jQuery文件上傳（https://github.com/blueimp/jQuery-File-Upload）它集成通過刪除bootstrap.fileupload.js文件，因爲它有一個與jQuery File Uploader命名衝突，並且無法正確使用它。這意味着您將無法使用Jasny組件的更高級功能。但我建議你閱讀代碼並實現你自己的解決方案（這不是那麼難:)）。

您可以做的另一件事是使用不同的組件進行引導。該組件可以很好地工作，不需要修改標記：http://gregpike.net/demos/bootstrap-file-input/demo.html。它比jasny組件簡單，因此在某些情況下可能更合適。