salve.
ho un problema che mi sta scoppiando la testa e non riesco a trovare una soluzione.
il mio problema è come si fa a fare l'upload di una foto tramite ajax ?
inviare dei dati da un form sono riuscito, ma quando devo inviare una foto non funziona.
poi ho trovato questo script ma lo stesso non invia la foto.
cosa c'è di sbagliato ?
grazie a tutti
ho un problema che mi sta scoppiando la testa e non riesco a trovare una soluzione.
il mio problema è come si fa a fare l'upload di una foto tramite ajax ?
inviare dei dati da un form sono riuscito, ma quando devo inviare una foto non funziona.
poi ho trovato questo script ma lo stesso non invia la foto.
Codice:
<section id='main'>
<div id='thumb'></div>
<div id='upload'>
<form id="ft">
<input type='file' id='file' accept='image/*' /></form>
<div id='selected'></div>
<button id='send'>Invia immagine</button>
<button id='select'>Seleziona immagine</button>
<progress id='progressbar' max='100' value='0'></progress>
</div>
</section>
Codice:
$(function () {
$("#select").click(
function () {
$("#file").get(0).click();
return false;
}
);
$("#file").change(
function () {
var files = $(this)[0].files;
if ( ! files.length ) {
$("#selected").html("Nessun file selezionato!");
} else {
var img = new Image();
$( img ).load(
function () {
window.URL.revokeObjectURL( this.src );
$("#selected").html( files[0].name + "<br />" + $(this)[0].naturalWidth + " x " + $(this)[0].naturalHeight + " @ " + Math.round( files[0].size / 1024 ) + " Kb" );
$("#send").show();
$("#select").addClass("mini");
}
).attr( "src" , window.URL.createObjectURL( files[0] ) );
$("#thumb").html( img );
}
}
);
$("#send").click(
function () {
$(this).hide();
$("#select").hide();
$("#progressbar").show();
var fd = new FormData();
fd.append("file", $("#file")[0].files[0]);
$.ajax({
url: "./image.php"
, type: "POST"
, data: fd
, dataType: "json"
, processData: false
, xhr: function () {
var xhr = $.ajaxSettings.xhr();
xhr.upload.addEventListener(
"progress"
, function ( evt ) {
if ( evt.lengthComputable ) {
$("#progressbar").attr({value: evt.loaded, max: evt.total});
}
}
, false
);
return xhr;
}
})
.done(
function( resp ) {
$("#progressbar").hide();
$("#p").append('<input type="hidden" value="' + resp.name + '" name="foto1">');
$("#progressbar").attr({value: "0", max: "100"});
}
);
}
);
});cosa c'è di sbagliato ?
grazie a tutti
