Làm thế nào để tải lên hình ảnh với hình ảnh xem trước bootstrap của Jasny?

Question

Tôi đang cố gắng sử dụng Bootstrap của Jasny. Đây là công việc tuyệt vời!

Tôi coudn't tìm giải pháp cho hình ảnh tải lên bootstrap trên trang http://jasny.github.com/bootstrap/javascript.html#fileupload

Với bootstrap-fileupload.js, làm sao tôi có thể tải lên hình ảnh sử dụng Ajax?

Answer 1

Tôi hỏi câu hỏi này trực tiếp ARNOLD DANIELS, chủ sở hữu của Bootstrap của Jasny.

Dưới đây là câu trả lời của mình:

Toàn bộ vấn đề của bản xem trước hình ảnh là hình ảnh là hiển thị đúng lập tức, mà không cần phải tải nó lên máy chủ sử dụng AJAX. Vì vậy, nó chỉ là một hình thức thông thường. Bạn có thể đăng biểu mẫu bằng AJAX http://api.jquery.com/jQuery.post/ nếu cần.

Nếu bạn muốn tải lên hình ảnh sử dụng AJAX và không muốn sử dụng một hình thức , thanh toán http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html

tôi đã sử dụng mẫu này với loại bỏ cơ sở dữ liệu releated dòng và làm việc một cách hoàn hảo đối với tôi!

Answer 2

Việc tải trên jasny là nhiều hơn một bản xem trước hoặc phía khách hàng quản lý tải lên thay vì một ajax, có lẽ bạn cần tp sử dụng phương pháp khác hoặc plugin, làm cho upload jasny sẽ gửi con đường xem trước bằng cách sử dụng hình ảnh nhị phân hiển thị

Answer 3

Trước tiên, bạn cần phải đăng ký css và file js:

Nếu bạn đang sử dụng Yii Framework:

$cs = Yii::app()->clientScript; 
$cs->registerCSSFile("/css/fileupload.css"); 
$cs->registerScriptFile('/js/fileupload.js', CClientScript::POS_END); 

Hoặc

<link rel="stylesheet" type="text/css" href="/css/fileupload.css"> 
<script type="text/javascript" src="/js/fileupload.js"></script> 

Sau đó đăng ký kịch bản sau đây:

$cs->registerScript("imageUpload", "$('.fileupload').fileupload({uploadtype: 'image'});", CClientScript::POS_END) ; 

Hoặc

<script type="text/javascript"> 
$('.fileupload').fileupload({uploadtype: 'image'}); 
</script> 

Sau đó thêm mã HTML sau đây vào trang của bạn:

<div class="fileupload fileupload-new" data-provides="fileupload"> 
    <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div> 
    <div> 
    <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" /></span> 
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> 
    </div> 
</div> 

Answer 4

Tôi đã xem qua câu hỏi này trên Google và chỉ muốn cho tôi đã làm nó cho bất cứ ai khác quan tâm (thậm chí nếu nó không cách thanh lịch nhất)

$(document).ready(function(){ 
$('.fileinput-preview').bind('DOMNodeInserted', function(event) { 
    var imgdata = ($('.fileinput-preview img').attr('src')); 
    $.post("upload.php", { imgdata: imgdata}) 
    .done(function(data) { 
    alert("Data Loaded: " + data); 
    }); 
    }) 
}) 

Đoạn mã trên phát hiện khi xem trước tệp đã thay đổi. Sau đó nó tìm thấy dữ liệu base64 từ thẻ hình ảnh và sử dụng jquery để đăng nó lên upload.php.

Upload.php chỉ đơn giản là mất dữ liệu hình ảnh base64 và lưu nó như một hình ảnh

$imgdata = $_POST['imgdata']; 
$ifp = fopen("newimage.jpg", "wb"); 
$data = explode(',', $imgdata); 
fwrite($ifp, base64_decode($data[1])); 
fclose($ifp);