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 구성 요소보다 간단하므로 일부 경우에 더 적합 할 수 있습니다.