2012-09-11 3 views

Trả lời

27

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

+2

Thx cho đề xuất. Tôi thích tính năng xem trước của tệp tin boostrap-fileupload.js và đó là lý do tại sao tôi đã cố gắng tìm cách kích hoạt tệp evenf từ js này. Đánh giá cao phản hồi, nhưng tôi đã biết về tải lên tệp jquery. –

+2

Tôi không thấy điều này là có thể. Nếu bạn nhìn vào nguồn của jasny nó sử dụng cùng tên cho hàm jquery được sử dụng bởi jquery.fileupload (cả hai đều được gọi là $ .fileupload). Do đó sẽ rất khó để sử dụng hai người trong số họ cùng nhau. –

6

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" /> 
1

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.