En mi HTML puedo seleccionar varios archivos.

<input type="file" id="img" multiple>

Quiero guardar cada elemento en una matriz de modo que yo pueda imprimir el archivo de origen.

He hecho esto en mi javascript, pero no funciona.

function loadfiles()
{
var x=document.getElementById("img");
for (var i=0;i<x.length;i++)
{
  document.write(x.elements[i].src);
}
}
  • ID se supone que para ser único.
  • así que ¿cuál es la pregunta ?
  • también, document.write no se puede utilizar después de que se haya cargado la página. Uso document.createElement, document.createTextNode y Element#appendChild
InformationsquelleAutor insanity | 2013-07-01

5 Comentarios

  1. 6

    La propiedad files usted obtiene una matriz de todos los archivos seleccionados por el archivo de entrada. Así que el loadfiles función debe ser modificado de la siguiente:

    function loadfiles()
    {
        var imageFiles = document.getElementById("img"),
        filesLength = imageFiles.files.length;
        for (var i = 0; i < filesLength; i++) {
          document.write(imageFiles.files[i].name);
        }
    }
    • gracias . este código fue perfecto @gautam
    • .nombre muestra el nombre del archivo . Quiero conseguir la de Origen o la RUTA de acceso del archivo. qué hacer ?
    • Los navegadores de restringir la recuperación de la ruta de acceso del archivo por razones de seguridad. Esto estaba disponible en navegadores antiguos, pero los navegadores compatibles con HTML5 ahora envía `C:\fakepath` en el nombre de ruta de acceso. Así que es mejor no confiar en algo que no está disponible en todos los principales navegadores. @locura
  2. 2

    DOM documentación (Mozilla):

    element = document.getElementById(id);

    donde

    • element es una referencia a un Elemento de objeto, o null si un elemento con el ID especificado no está en el documento.
    • id es un caso sensible a la cadena que representa el IDENTIFICADOR único del elemento que se busca.

    En el código document.getElementById(id) devuelve un único elemento, y no una lista.

    Para acceder a los archivos añadidos a la entrada de echar un vistazo a los Archivos HTML5 API.

    var f = (document.getElementById('img').files);
    for (var i =0; i < f.length; i++){
       var new_div = document.createElement('div');
       new_div.innerHTML = f[i].name;
       document.body.appendChild(new_div);   
    }

    FYI: el Uso de document.write() es extremadamente peligroso y debe evitarse. Para obtener más leer este stackoverflow Q&A: ¿Por qué es documento.escribir considera una «mala práctica»?

    En el ejemplo anterior he sustituido document.write con document.body.appendChild

    Violín (con jQuery): http://jsfiddle.net/4Yq4F/

    Obtener la ruta de archivo

    Esto es, en su respuesta, solicitando la ruta de archivo de los archivos. Desafortunadamente, debido a razones de seguridad, este es no posible a partir de ahora. Mozilla Firefox navegadores sin embargo le proporcionará la ruta de archivo con la mozFullPath atributo. Si usted quiere usar, en el ejemplo anterior sustituto f[i].name con f[i].mozFullPath

    • .nombre muestra el nombre del archivo . Quiero conseguir la de Origen o la RUTA de acceso del archivo. qué hacer ?
    • he hecho una edición a mi respuesta para explicar eso.
  3. 1

    Este debe trabajar para usted…

    function loadfiles()
    {
        var x=document.getElementsByTagName("input");
        for (var i=0;i<x.length;i++)
        {
             if(x[i].type == "file"){
                 document.write(x[i].value);
             }
         }
    }
  4. 0

    este código será el trabajo para usted.

    HTML

    <input type="text" id="text"/>
    <input type="button" value="add" id="adda"/>

    JavaScript

    var arry=[];
    $("#adda").click(function(){
       arry.push( $("#text").val());
        alert(arry);
    });
  5. 0
    var fileArray = new Array();
     $('#inputPostFile').change(function() {
                    var files = this.files;
                       $('.uploadedFileList').html('');
                    $.each(files, function (index, value) {
                        fileArray.push(value);
                    });
                });

Dejar respuesta

Please enter your comment!
Please enter your name here