Hola a todos! Les cuento que estoy incorporando un script que, al subir un archivo via un input type=file, me muestre la imagen en miniatura y luego la almaceno.
El código del archivo upload.js es el siguiente:
Código:
(function () {
var input = document.getElementById("images"),
formdata = false;
function showUploadedItem (source) {
var list = document.getElementById("image-list"),
li = document.createElement("li"),
img = document.createElement("img");
img.src = source;
li.appendChild(img);
list.appendChild(li);
}
if (window.FormData) {
formdata = new FormData();
document.getElementById("btn").style.display = "none";
}
input.addEventListener("change", function (evt) {
document.getElementById("response").innerHTML = "Uploading . . ."
var i = 0, len = this.files.length, img, reader, file;
for ( ; i < len; i++ ) {
file = this.files[i];
if (!!file.type.match(/image.*/)) {
if ( window.FileReader ) {
reader = new FileReader();
reader.onloadend = function (e) {
showUploadedItem(e.target.result, file.fileName);
};
reader.readAsDataURL(file);
}
if (formdata) {
formdata.append("images[]", file);
}
}
}
if (formdata) {
$.ajax({
url: "upload.php",
type: "POST",
data: formdata,
processData: false,
contentType: false,
success: function (res) {
document.getElementById("response").innerHTML = res;
}
});
}
}, false);
}());
Sucede que lo que necesito es limitar y que sólo se pueda subir un archivo y nada más. En realidad lo ideal para mi sería que se pueda subir un sólo archivo y, en caso que no sea la vista previa deseada (porque se hayan equivocado de imagen o lo que sea), se pueda eliminar y volver a subir otra foto. Pero siempre poder subir sólo una, me explico? espero que si!
El código del html es un formulario con el input de tipo file, el submit y ademas un div donde muestra la vista previa del archivo.
Y además tiene un upload.php que lo que hace es, una vez que se hace submit al formulario, se copia a una carpeta del servidor la imagen.
Bueno, ojalá me puedan ayudar!! muchas gracias desde ya y saludos!!!