Twitter Bootstrap FileUpload

Question

Tôi muốn sử dụng tệp bootstrap-fileupload.js (http://jasny.github.com/bootstrap/javascript.html#fileupload) nhưng tôi bị nhầm lẫn khi kích hoạt sự kiện.

Làm cách nào để kích hoạt sự kiện gửi hình ảnh tới tập lệnh web (ví dụ: php) khi tài sản truyền thông được chọn?

Answer 1

Tôi khuyên bạn nên sử dụng https://github.com/blueimp/jQuery-File-Upload để tải lên tệp.

Answer 2

Tôi tình cờ gặp vấn đề tương tự khi tôi muốn tải lên hình ảnh qua yêu cầu AJAX ngay khi hình ảnh được duyệt/chọn bởi người dùng và cập nhật trường ẩn với ID hình ảnh đã lưu. Tôi không thể tìm thấy giải pháp với tệp bootstrap-fileupload.js. Vì vậy, cách tiếp cận dưới đây làm việc cho tôi. Mẫu

<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> 

Hình ảnh: (không phải là một hình thức lồng nhau!)

<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

Bạn có thể tích hợp nó với jQuery File Upload (https://github.com/blueimp/jQuery-File-Upload) bằng cách loại bỏ các tập tin bootstrap.fileupload.js vì nó có một đặt tên xung đột với Trình tải lên tệp jQuery và sẽ không hoạt động chính xác với nó. Điều này có nghĩa rằng bạn sẽ không thể sử dụng các tính năng nâng cao hơn của bộ sưu tập Jasny. Nhưng tôi đề nghị bạn đọc mã và thực hiện giải pháp của riêng bạn (nó không phải là khó :)).

Điều khác bạn có thể làm là sử dụng một thành phần khác cho bootstrap. Thành phần này hoạt động tốt ngoài hộp, không cần phải sửa đổi đánh dấu của bạn: http://gregpike.net/demos/bootstrap-file-input/demo.html. Nó đơn giản hơn thành phần jasny và do đó có thể phù hợp hơn trong một số trường hợp.