input file update

[virla]

hola buenas tardes, estoy haciendo un formulario donde subo varias imagenes con un input file, hasta ahi todo funciona muy bien, pero cuando habro para editar de nuevo el formulario, no se como hacer para que muestre las imagenes que subi.

aqui les dejo el codigo
<form action="" method="post" role="form" enctype="multipart/form-data">
<input type="file" id="files" name="files[]" multiple/>
</form>

<script>
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
} else {
alert('The File APIs are not fully supported in this browser.');
}
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object

// files is a FileList of File objects. List some properties.
var output = [];

for (var i = 0, f; f = files[i]; i++) {
output.push('<li>',
'<strong>',escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
f.size, ' bytes',
'</li>');
}
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

document.getElementById('files').addEventListener( 'change', handleFileSelect, false);
document.getElementById('files').addEventListener( 'DOMContentLoaded', handleFileSelect, false);
</script>

alguien que me tire un cable?
desde ya muchas gracias

[Alexis88]

Fíjate en el código de ejemplo de esta sección.

[virla]

Te agradezco, pero ese articulo fue de donde saque el código y lo leí muchas veces, si bien de javascript no se nada, mas que lo básico, he intentado todo, de cualquier manera por tu link volví a releer pero sigo sin tener idea de como le paso los archivos, supuestamente input file no usa value, y es ahí mi confusión. entiendo que el onload es el que carga, pero por algún lado tengo que pasar las direcciones de los archivos, que tengo almacenadas en la db.

[Alexis88]

En realidad, todos los elementos <input>, cualquiera sea el type, poseen el atributo value. Por otro lado, como no lo habías aclarado, supuse que deseabas mostrar las imágenes que acababas de seleccionar. Si las estás subiendo a un servidor y almacenando sus rutas en una base de datos, entonces debes abordar este problema desde el lado del servidor, ya sea con PHP, ASP, JSP o el lenguaje que uses. Solo necesitas hacer una consulta a la base de datos y recuperar las rutas de las imágenes para poder mostrarlas a partir de las rutas recuperadas. Te sugiero asociar cada ruta a un identificador para que puedas seleccionar solo las rutas que desees (las que tengan un identificador asociado con el dato de búsqueda).

[virla]

eso ya lo tengo como te conte antes, ahora el tema es como le paso esas rutas/nombreimagen al javascript para que me muestre las imagenes cargadas

[Alexis88]

No tienes que "pasar" nada; tan solo realiza una consulta a la base de datos, recupera las rutas y muéstralas dentro de elementos <img>.

Aunque es offtopic, te mostraré un ejemplo:

Código PHP:

$consulta = 'SELECT ruta FROM tabla';
$resultados = mysqli_query($conexion, $consulta) or exit(mysqli_error($conexion));
 
if (mysqli_num_rows($resultados)){
    while ($filas = mysqli_fetch_assoc($resultados)){
        echo "<img src=\"{$filas['ruta']}\" />";
    }
}
 

Lo anterior es por si ya tienes las rutas en la base de datos, que es lo que diste a entender, por lo que JavaScript no tendría nada que ver en el tema. Ahora que si lo que pretendes es subir las imágenes al servidor, guardar las rutas en la base de datos y mostrar las imágenes subidas, todo a la vez, tendrás que utilizar una petición asíncrona (AJAX); sin embargo, por un tema de eficiencia, te sería más útil mostrar las imágenes como en el ejemplo del enlace que te dí al inicio.

[virla]

Parece que no me hago entender, todo eso que me decis ya esta funcinando, lo que necesito es como pasarle al javascript del link las imagenes para que las muestre, no quiero hacer eso de mostrar con img, sino con el javascript, que para eso esta, no creo que solo sea para cargar las imagenes, debe haber una forma para cargarlas en un formulario de edicion(actulizar).
tengo el form cargar que funciona con el javascript y la db guarda la ruta, hasta ahi todo bien,
cuando quiero entrar al form editar muestra todos los campos, pero no se como pasarle los datos de la ruta al javascript para que carge las imagenes

[Alexis88]

Iniciado por virla

[...] no quiero hacer eso de mostrar con img, sino con el javascript, que para eso esta [...]

¿De dónde has sacado esa idea?

Con JavaScript puedes interactuar con el DOM (Modelo de Objetos del Documento), realizar peticiones asíncronas, interactuar con elementos multimedia y hasta trabajar del lado del servidor (Node.js), entre otras cosas. Si deseas mostrar las imágenes cuyas rutas almacenaste en la base de datos, puedes: mostrarlas en elementos <img> o como fondo de elementos de bloque, mediante propiedades CSS; todo esto luego de una consulta a la base de datos en donde recuperarás las rutas almacenadas. Si deseas obtener las rutas almacenadas de manera dinámica (no al cargar la página sino más adelante), necesitarás realizar una petición asíncrona (AJAX) que te las devuelva, preferentemente en formato JSON para luego decodificar al objeto resultante, iterarlo e ir mostrando cada imagen mediante las rutas obtenidas. Incluso en el ejemplo del enlace que te dí al inicio y que dijiste que ya habías visto, utilizan elementos <img> para mostrar las imágenes seleccionadas puesto que, de las dos formas que te expliqué, es la más práctica.

Si el formulario es de edición, sería aun mejor que cargues las rutas desde la base de datos y luego mostrarlas en elementos <img>; es la forma más usada por ser la más práctica y sencilla.

A todo esto, ¿cómo pretendías que funcione? Es decir, si dices que no quieres utilizar elementos <img>, ¿de qué manera creías que se podría hacer?

[virla]

Perdon, pero sigo sin hacerme entender.
lo que quiero es que cuando la pagina carge, me carge las imagenes sin tener que hacer click en el boton de subir, que es ahi donde arranca el script.

como le envio los datos al script
ejemplo onliad($files) (llama al script y este carga las imagenes)
donde $files contiene las rutas de las imagenes

[codzeus]

Iniciado por virla

Perdon, pero sigo sin hacerme entender.
lo que quiero es que cuando la pagina carge, me carge las imagenes sin tener que hacer click en el boton de subir, que es ahi donde arranca el script.

como le envio los datos al script
ejemplo onliad($files) (llama al script y este carga las imagenes)
donde $files contiene las rutas de las imagenes

Hola, quieres que al seleccionar las imágenes empiecen a subirse sin pulsar el botón subir?

si es así puedes usar un evento onchange en el input type=file donde cargas las imagénes

Código:

<input type="file" onchange="alert('Me eh ejecutado al seleccionar las imagenes');">

por otra parte si te refieres a que cuando cargue LA PAGINA mostrar las imágenes ya subidas al servidor tienes que hacer lo que te dijo el compañero, consultar y mostrar las imágenes con img

salu2

[Alexis88]

Iniciado por virla

[...] lo que quiero es que cuando la pagina carge, me carge las imagenes sin tener que hacer click en el boton de subir, que es ahi donde arranca el script [...]

Es contradictorio lo que dices. Es decir, se supone que tu script sube al servidor archivos de imagen que el usuario seleccionó. Luego, nos dices que deseas mostrar las imágenes mediante las rutas almacenadas en la base de datos; pero ahora dices que deseas que ese proceso se ejecute sin pulsar el botón de subida de imágenes. Es una de dos: o deseas subir archivos o deseas recuperar las rutas almacenadas en la base de datos y mostrarlas. Debes definir el funcionamiento que tendrá tu script; si subirá imágenes o las recuperará a través de las rutas almacenadas en la base de datos para mostrarlas en el documento.

Sospecho que no estás utilizando los términos adecuados para expresar tu problema.