Jak wgrać obraz z obrazkiem bootstrapu Jasnego?

Question

Próbuję użyć Bootstrapa Jasnego. To jest dobra robota!

I coudn't znaleźć rozwiązanie dla bootstrap Załaduj obraz na stronie http://jasny.github.com/bootstrap/javascript.html#fileupload

Z bootstrap-fileupload.js, jak mogę przesłać zdjęcie przy użyciu Ajax?

Answer 1

Zadałem to pytanie bezpośrednio ARNOLD DANIELS, który jest właścicielem Bootstrapa Jasnego.

Oto jego odpowiedź:

Sensem podglądu obrazu jest to, że obraz jest pokazać prawo dalej, bez konieczności przesłać go do serwera przy użyciu AJAX. Więc pozostaje tylko regularną formą. W razie potrzeby możesz opublikować formularz za pomocą AJAX http://api.jquery.com/jQuery.post/.

Jeśli chcesz przesłać obraz za pomocą AJAX i nie chcą używać formularza Zamówienie http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html

użyłem tej próbki z usuwania baz releated linie i działało idealnie dla mnie!

Answer 2

Wysyłanie na Jasnego jest więcej niż podglądu lub klienta bocznej zarządzania wysyłania zamiast AJAX, prawdopodobnie trzeba tp użyć innej metody lub wtyczki, powodują jasny przesyłanie wyśle ​​ścieżkę podglądu za pomocą obrazu binarnego wyświetlania

Answer 3

Najpierw musisz zarejestrować css i js pliki:

Jeśli używasz Yii Framework:

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

Albo

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

Następnie zarejestrować następujący skrypt:

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

lub

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

Następnie dodaj następujący kod HTML na swojej stronie:

<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

natknąłem to pytanie w Google i po prostu chciał pokazać Zrobiłem to dla nikogo innego zainteresowanego (nawet jeśli nie jest to najbardziej elegancki sposób)

$(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); 
    }); 
    }) 
}) 

Powyższy fragment kodu wykrywa zmianę podglądu pliku wejściowego. Następnie znajduje dane base64 z tagu obrazu i używa jquery, aby opublikować go w upload.php.

upload.php prostu pobiera dane base64 obraz i zapisuje go jako obraz

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