Twitter Bootstrap FileUpload

Question

bootstrap-fileupload.js（http://jasny.github.com/bootstrap/javascript.html#fileupload）を使用したいと思いますが、私はイベントトリガを混乱させています。

メディアアセットが選択されたら、イメージをWebスクリプト（たとえば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コンポーネントのより高度な機能を使用することはできません。しかし、私はあなたがコードを読んであなた自身の解決策を実装することをお勧めします（それはそれほど難しいことではありません:)）。

もう1つのことは、ブートストラップに別のコンポーネントを使用することです。このコンポーネントは、すぐに使用でき、マークアップを変更する必要はありません：http://gregpike.net/demos/bootstrap-file-input/demo.html。 jasnyコンポーネントよりも簡単であるため、場合によってはより適しています。