Caricamento Asincrono Immagini

[nostradamus1915]

Salve a tutti, devo realizzare un sito dove sia possibile fare l'upload di un'immagine, questa a sua volta deve comparire ed essere caricata in un db senza che la pagina si resetti.

La funzione che ho usato per farla comparire è la seguente:
HTML

<input type='file' onchange="readURL(this);" id="caricfile" />

JAVASCRIPT

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();

reader.onload = function (e) {
varul=e.target.result;
$('#blah')
.attr('src', e.target.result)
.width(183)
.height(200);
document.getElementById("debug").value = varul;
}

reader.readAsDataURL(input.files[0]);
}
}

e funziona.

Ora rimane il problema di caricare l'immagine in questione nel db.
La variabile varul contiene e.target.result che da quel che ho capito è una sorta di codifica per l'immagine che carico.

Ovviamente devo usare del codice AJAX e quindi:

function carica_immagine(){
var oXHR = new XMLHttpRequest();
var params;

oXHR.open("post", "invia_foto.php", true);
oXHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
oXHR.onreadystatechange = function(){
if(oXHR.readyState==4){
if(oXHR.responseText == "OK"){
}
else {
}
}
}
params = "code="+encodeURIComponent(varul);
oXHR.send(params);

}

Quindi è come se inviassi l'immagine (sotto forma di e.target.result) alla pagina php, la quale trasformerebbe dapprima la stringa in immagine e successivamente caricherebbe quest'ultima nel DB.
Il problema sta nel fatto che e.target.result non è un formato che posso copiare nel file, qualcuno ha un'idea di come posso fare? Vanno bene anche librerie che permettono di fare ciò.
Grazie.

[Emulman]

non capisco...perchè tutto stò ajax quando basta usare un <input type="file"> e alcune istruzioni per fare un upload in PHP?

[Ranma2]

ti consiglio di usare jquery form

comunque sei nella sezione sbagliata...

[nostradamus1915]

Non posso usare il php perché non devo refreshare la pagina...
Ho chiesto nella sezione javascript e mi hanno detto di spostare qua dato che il codice js era giusto.
Ad ogni modo, mi servirebbe sapere come convertire un'immagine in string da inviare con ajax.

[Emulman]

non so se potrà esserti di aiuto ma guarda qua http://stackoverflow.com/questions/9...-in-javascript

[Ranma2]

Originariamente inviato da nostradamus1915
Non posso usare il php perché non devo refreshare la pagina...
Ho chiesto nella sezione javascript e mi hanno detto di spostare qua dato che il codice js era giusto.
Ad ogni modo, mi servirebbe sapere come convertire un'immagine in string da inviare con ajax.

Secondo me stai prendendo il problema in maniera non corretta, da quel che vedo fai una richiesta post che ha come contenuto l'immagine, il problema è che php non sa interpretare questa cosa in maniera consona, dovresti fare qualcosa di poco ortodosso.

Io to do un'alternativa, ma prima una premessa:
- ti sconsiglio di fare l'upload solo in javascript, in quanto se qualcuno lo ha disabilitato non può fare l'upload, quindi fare entrambi i metodi, sia sincrono che asincrono.
- ti consiglio di appoggiarti ad un framework come jquery, che ottimizza la compatibilità con i vari browser, il tuo esempio non può funzionare su tutti i browser dato che, per esempio, FileReader non è supportato da internet explorer

Come procedere:
- utilizza jquery form
- crea un normale form per l'invio di dati e inserisci il tuo upload
- se javascript è attivo vai di invio asincrono altrimenti procedi con l'upload normale

[nostradamus1915]

>Emulman
Mi è stata molto utile la funzione

function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;

var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

var dataURL = canvas.toDataURL("image/png");

return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Ma ora come faccio a passare da base 64 a image (blob) da inserire nel database?

[nostradamus1915]

Ok ho risolto con questa funzione sul lato php

$code = $_POST['code'];
$img = imagecreatefromstring(base64_decode($code));
if($img != false)
imagejpeg($img, 'carta.jpg');

Però non mi salva l'intera immagine ma solo una parte : /

EDIT: Ho risolto anche questo problema!
Mi rimane un'ultima cosa da fare, ovvero fare l'upload dell'immagine nel database tramite query, come posso fare?

[Alhazred]

Nel db non metterci l'immagine, salva l'immagine in una cartella e nel db mettici solo il percorso e il nome del file, così che puoi recuperarla dalla cartella.
Facendo molti upload ti troveresti con una tabella che occupa uno spazio di dimensioni improponibili.

[nostradamus1915]

Consiglio utilissimo, grazie