Wie lade ich ein Bild mit Jasnys Bootstrap Image Preview hoch?

Question

Ich versuche Jasnys Bootstrap zu benutzen. Das ist eine schöne Arbeit!

coudn't I-Lösung für Bootstrap-Upload Bild auf Seite http://jasny.github.com/bootstrap/javascript.html#fileupload

mit Bootstrap-fileupload.js finden, wie kann ich Bild Ajax hochladen?

Answer 1

Ich habe diese Frage direkt an ARNOLD DANIELS gestellt, der Besitzer von Jasnys Bootstrap ist.

Hier ist seine Antwort:

Der ganze Sinn der Bildvorschau ist, dass das Bild richtig zeigen weg, ohne dass sie an den Server mit AJAX laden. So bleibt es nur eine reguläre Form. Sie können ein Formular mit AJAX http://api.jquery.com/jQuery.post/ bei Bedarf buchen.

Wenn Sie das Bild mit AJAX laden wollen und wollen nicht eine Form, Kasse http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html

ich mit dem Entfernen von Datenbank releated Linien diese Probe verwendet verwenden und arbeitete perfekt für mich!

Answer 2

Der Upload auf jasny ist mehr als eine Vorschau oder Client-Seite Upload-Management statt einen AJAX, wahrscheinlich müssen Sie tp andere Methode oder Plugin verwenden, verursachen die jasny Upload wird die Vorschau Pfad mit dem binären Bild senden Anzeige

Answer 3

Zuerst müssen Sie die CSS und JS-Dateien registrieren:

Wenn Sie Yii Framework verwenden:

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

Oder

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

Dann das folgende Skript registrieren:

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

oder

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

dann den folgenden HTML-Code zu Ihrer Seite hinzufügen:

<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

ich auf diese Frage auf Google kam und wollte nur, dass ich für jemand tat es zeigen, sonst interessiert (auch wenn es nicht die eleganteste Art und Weise)

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

Das obige Stück Code erkennt, wenn die Dateieingabe Vorschau geändert hat. Es findet dann die base64-Daten aus dem image-Tag und verwendet jquery, um es in upload.php zu stellen.

upload.php nimmt einfach die base64 Bilddaten und speichert sie als Bild

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