Home / Questions / 323716
Accepted
Flowcou
Asked: 2020-01-23 10:23:28 +0800 CST 2020-01-23 10:23:28 +0800 CST

Show images from input file JavaScript

  • 772

I am doing a class exercise, it consists of doing a multiple drag and drop, displaying the data and the images and the only thing missing is to be able to display the images that I upload to that input, I have managed to make it display one, but Of course, when I upload variables, only one is displayed. I leave the code.

function GetFileInfo() {
  var fileInput = document.getElementById("fileInput");
  var archivoRuta = fileInput.value;
  var extPermitidas = /(.PNG|.png|.jpg|.JPG|.JPEG|.jpeg)$/i;
  var message = "";
  if ('files' in fileInput) {
      if (fileInput.files.length == 0 || !extPermitidas.exec(archivoRuta)) {
          message = "Por favor eliga uno o más archivos.";
          if (!extPermitidas.exec(archivoRuta)) {
              message = "Por favor, asegurese de que eliga una imagen";
          }
      } else {
          if (fileInput.files && fileInput.files[0, 1]) {
              var visor = new FileReader();
              visor.onload = function(e) {
                  document.getElementById('visorArchivo').innerHTML =
                      '<embed src="' + e.target.result + '" width="500" height="375" />';

              };
              visor.readAsDataURL(fileInput.files[0, 1]);
          }
          for (var i = 0; i < fileInput.files.length; i++) {
              message += "<br /><b>" + (i + 1) + ". file</b><br />";
              var file = fileInput.files[i];
              if ('name' in file) {
                  message += "Nombre: " + file.name + "<br />";
              } else {
                  message += "Nombre: " + file.fileName + "<br />";
              }
              if ('size' in file) {
                  message += "Tamaño: " + file.size + " bytes <br />";
              } else {
                  message += "Tamaño: " + file.fileSize + " bytes <br />";
              }
              if ('mediaType' in file) {
                  message += "tipo: " + file.mediaType + "<br />";
              }
          }
      }
  } else {
      if (fileInput.value == "") {
          message += "Selecciona una o más imagenes.";
          message += "<br />Use el control o shift para seleccionar varias imagenes";
      } else {
          message += "Tu navegador no soporta el programa";
          message += "<br />Fila seleccionada " + fileInput.value;
      }
  }

  var info = document.getElementById("info");
  info.innerHTML = message;
}



   
 <body onload="GetFileInfo ()">
    <form>
        <div class="inf__drop-area">
            <span class="inf__btn">Elige imagen</span>
            <input type="file" id="fileInput" name="files" multiple="multiple" size="60" onchange="GetFileInfo ()" />
        </div>
        <br>
        <br>
        <div id="visorArchivo">
            <!--Aqui se desplegará el fichero-->
        </div>
        <div id="info" style="margin-top:30px"></div>
    </form>

</body>

javascript

1 Answers

  1. Best Answer

    Actually you have it almost done, you just have to iterate through all the files as you already do to display the data, but to load the images. This piece of code:

      if (fileInput.files && fileInput.files[0, 1]) {
      var visor = new FileReader();
      visor.onload = function(e) {
          document.getElementById('visorArchivo').innerHTML =
              '<embed src="' + e.target.result + '" width="500" height="375" />';

      };
      visor.readAsDataURL(fileInput.files[0, 1]);
  }

    You have to iterate it:

    function GetFileInfo() {
  var fileInput = document.getElementById("fileInput");
  var archivoRuta = fileInput.value;
  var extPermitidas = /(.PNG|.png|.jpg|.JPG|.JPEG|.jpeg)$/i;
  var message = "";
  if ('files' in fileInput) {
      if (fileInput.files.length == 0 || !extPermitidas.exec(archivoRuta)) {
          message = "Por favor eliga uno o más archivos.";
          if (!extPermitidas.exec(archivoRuta)) {
              message = "Por favor, asegurese de que eliga una imagen";
          }
      } else {
          if (fileInput.files.length ) {
            document.getElementById('visorArchivo').innerHTML='';
              
            for (let i=0; i < fileInput.files.length;i++) {
              let visor = new FileReader();
              visor.onload = function(e) {
                  document.getElementById('visorArchivo').innerHTML +=
                      '<embed src="' + e.target.result + '" width="500" height="375" />';

              };
             
              visor.readAsDataURL(fileInput.files[i]);
            }
          }
          for (var i = 0; i < fileInput.files.length; i++) {
              message += "<br /><b>" + (i + 1) + ". file</b><br />";
              var file = fileInput.files[i];
              if ('name' in file) {
                  message += "Nombre: " + file.name + "<br />";
              } else {
                  message += "Nombre: " + file.fileName + "<br />";
              }
              if ('size' in file) {
                  message += "Tamaño: " + file.size + " bytes <br />";
              } else {
                  message += "Tamaño: " + file.fileSize + " bytes <br />";
              }
              if ('mediaType' in file) {
                  message += "tipo: " + file.mediaType + "<br />";
              }
          }
      }
  } else {
      if (fileInput.value == "") {
          message += "Selecciona una o más imagenes.";
          message += "<br />Use el control o shift para seleccionar varias imagenes";
      } else {
          message += "Tu navegador no soporta el programa";
          message += "<br />Fila seleccionada " + fileInput.value;
      }
  }

  var info = document.getElementById("info");
  info.innerHTML = message;
}
    <body onload="GetFileInfo ()">
    <form>
        <div class="inf__drop-area">
            <span class="inf__btn">Elige imagen</span>
            <input type="file" id="fileInput" name="files" multiple="multiple" size="60" onchange="GetFileInfo ()" />
        </div>
        <br>
        <br>
        <div id="visorArchivo">
            <!--Aqui se desplegará el fichero-->
        </div>
        <div id="info" style="margin-top:30px"></div>
    </form>

</body>

    • 1