1

Estoy trabajando en un proyecto ASP.Net Core MVC y creé una dropzone para subir mis archivos como se muestra a continuación

function readFile(input) {

  debugger;
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    for (let i = 0; i < input.files.length; i++) {
      reader.onload = function(e) {
        var htmlPreview =
          '<img width="100" src="' +
          e.target.result +
          '" />' +
          "<p>" +
          input.files[i].name +
          "</p>";
        var wrapperZone = $(input).parent();
        var previewZone = $(input)
          .parent()
          .parent()
          .find(".preview-zone");
        var boxZone = $(input)
          .parent()
          .parent()
          .find(".preview-zone")
          .find(".box")
          .find(".box-body");

        wrapperZone.removeClass("dragover");
        previewZone.removeClass("hidden");
        // boxZone.empty();
        boxZone.append(htmlPreview);
      };
    }


    reader.readAsDataURL(input.files[0]);
  }
}

function reset(e) {
  e.wrap("<form>")
    .closest("form")
    .get(0)
    .reset();
  e.unwrap();
}

$(".dropzone").change(function() {
  readFile(this);
});

$(".dropzone-wrapper").on("dragover", function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).addClass("dragover");
});

$(".dropzone-wrapper").on("dragleave", function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).removeClass("dragover");
});

$(".remove-preview").on("click", function() {
  var boxZone = $(this)
    .parents(".preview-zone")
    .find(".box-body");
  var previewZone = $(this).parents(".preview-zone");
  var dropzone = $(this)
    .parents(".form-group")
    .find(".dropzone");
  boxZone.empty();
  previewZone.addClass("hidden");
  reset(dropzone);
});
.container {
  padding: 50px 100px;
}

.box {
  position: relative;
  background: #ffffff;
  width: 100%;
}

.box-header {
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
  margin-bottom: 10px;
}

.box-tools {
  position: absolute;
  right: 10px;
  top: 5px;
}

.dropzone-wrapper {
  border: 2px dashed #91b0b3;
  color: #92b0b3;
  position: relative;
  height: 150px;
}

.dropzone-desc {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  width: 40%;
  top: 60px;
  font-size: 16px;
}

.dropzone,
.dropzone:focus {
  outline: none !important;
  width: 100%;
  cursor: pointer;
}

.input-file {
  position: absolute;
  width: 100%;
  height: 150px;
  opacity: 0;
}

.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
  background: #ecf0f5;
}

.preview-zone {
  text-align: center;
}

.preview-zone .box {
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />


<div class="row" id="10secs">
  <div class="col-lg-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">10sec</h4>
      </div>
      <div class="card-body">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <div class="preview-zone hidden">
                  <div class="box box-solid">
                    <div class="box-header with-border">
                      <div><b>Preview</b></div>
                      <div class="box-tools pull-right">
                        <button type="button" class="btn btn-danger btn-xs remove-preview">
                                             <i class="fa fa-times"></i> Reset
                                           </button>
                      </div>
                    </div>
                    <div class="box-body"></div>
                  </div>
                </div>
                <div class="dropzone-wrapper">
                  <div class="dropzone-desc">
                    <i class="glyphicon glyphicon-download-alt"></i>
                    <div>Choose an image file or drag it here.</div>
                  </div>
                  <input type="file" class="dropzone input-file" multiple asp-for="@Model.Files10" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Como puedes ver es un multi-input file, por lo que puedes subir multiples archivos en el mismo dropzone. En la función readFile de javascript creo un thumbnail de la imagen, el problema es que cuando subo más de un archivo, solamente muestra la primera imagen, como puedo mostrar el thumbnail de todos los archivos subidos? resultado esperado:

enter image description here

Intenté iterar dentro de ellas, pero simplemente muestra la primer imagen y utiliza el nombre del último archivo

0

1 respuesta 1

1

Tenes que hacer algunos cambios a tu funcion readFile(), de todas maneras te comento todo el codigo:

function readFile(input) {
  if (input.files && input.files[0]) {
    let arr = input.files // guardamos el array de archivos que estan sin leer en este punto
    for (let i = 0; i < input.files.length; i++) { // lo recorremos
      let reader = new FileReader(); // cada vez que queramos leer un archivo redefinimos el reader, si usamos la misma instancia nos saltara el error (Uncaught InvalidStateError: Failed to execute 'readAsDataURL' on 'FileReader': The object is already busy reading Blobs.)
      reader.readAsDataURL(arr[i]); // leemos el archivo en el indice indicado
      reader.addEventListener("load",() => { // al terminar de cargar el archivo
        var htmlPreview = `
        <div class="box-element">` +
          '<img width="100" src="' +
          reader.result + // ponemos el resultado del reader como src de la imagen
          '" />' +
          "<p>" +
          input.files[i].name +
          "</p></div>";
      var wrapperZone = $(input).parent();
      var previewZone = $(input)
        .parent()
        .parent()
        .find(".preview-zone");
      var boxZone = $(input)
        .parent()
        .parent()
        .find(".preview-zone")
        .find(".box")
        .find(".box-body");
      wrapperZone.removeClass("dragover");
      previewZone.removeClass("hidden");
      boxZone.append(htmlPreview);
      })  
    }    
  };
}


function reset(e) {
  e.wrap("<form>")
    .closest("form")
    .get(0)
    .reset();
  e.unwrap();
}

$(".dropzone").change(function() {
  readFile(this);
});

$(".dropzone-wrapper").on("dragover", function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).addClass("dragover");
});

$(".dropzone-wrapper").on("dragleave", function(e) {
  e.preventDefault();
  e.stopPropagation();
  $(this).removeClass("dragover");
});

$(".remove-preview").on("click", function() {
  var boxZone = $(this)
    .parents(".preview-zone")
    .find(".box-body");
  var previewZone = $(this).parents(".preview-zone");
  var dropzone = $(this)
    .parents(".form-group")
    .find(".dropzone");
  boxZone.empty();
  previewZone.addClass("hidden");
  reset(dropzone);
});
.container {
  padding: 50px 100px;
}

.box {
  position: relative;
  background: #ffffff;
  width: 100%;
}

.box-header {
  color: #444;
  display: block;
  padding: 10px;
  position: relative;
  margin-bottom: 10px;
}

.box-tools {
  position: absolute;
  right: 10px;
  top: 5px;
}

.box-body{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 15px;
}

.box-element{
  display: grid;
  height: 100px;
  width: 80px;
  grid-template-rows: 80% 20%;
  font-size: 10px;
}

.box-element img{
  height: 70px;
  width: 70px;
}

.dropzone-wrapper {
  border: 2px dashed #91b0b3;
  color: #92b0b3;
  position: relative;
  height: 150px;
}

.dropzone-desc {
  position: absolute;
  margin: 0 auto;
  left: 0;
  right: 0;
  text-align: center;
  width: 40%;
  top: 60px;
  font-size: 16px;
}

.dropzone,
.dropzone:focus {
  outline: none !important;
  width: 100%;
  cursor: pointer;
}

.input-file {
  position: absolute;
  width: 100%;
  height: 150px;
  opacity: 0;
}

.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
  background: #ecf0f5;
}

.preview-zone {
  text-align: center;
}

.preview-zone .box {
  box-shadow: none;
  border-radius: 0;
  margin-bottom: 0;
}
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="estilos.css">
    <title>Document</title>
</head>
<body>

  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="row" id="10secs">
  <div class="col-lg-12">
    <div class="card">
      <div class="card-header">
        <h4 class="card-title">10sec</h4>
      </div>
      <div class="card-body">
        <div class="container">
          <div class="row">
            <div class="col-md-12">
              <div class="form-group">
                <div class="preview-zone hidden">
                  <div class="box box-solid">
                    <div class="box-header with-border">
                      <div><b>Preview</b></div>
                      <div class="box-tools pull-right">
                        <button type="button" class="btn btn-danger btn-xs remove-preview">
                                             <i class="fa fa-times"></i> Reset
                                           </button>
                      </div>
                    </div>
                    <div class="box-body"></div>
                  </div>
                </div>
                <div class="dropzone-wrapper">
                  <div class="dropzone-desc">
                    <i class="glyphicon glyphicon-download-alt"></i>
                    <div>Choose an image file or drag it here.</div>
                  </div>
                  <input type="file" class="dropzone input-file" multiple asp-for="@Model.Files10" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

  <script type="text/javascript" src="scripts2.js" defer></script>

</body>
</html>

Espero que te sirva.

3
  • Hola, sirve de maravilla, pero porque se apilan los files? que es lo que tengo mal en mi css que no me deja ponerlos de forma horizontal como el resultado esperado?
    – Demian
    Commented el 13 dic. 2022 a las 23:07
  • @Demian porque te falta formato, definir su tamaño y como los queres alinear, el navegador no puede adivinar como deseas que se muestre la interfaz. Faltan selectores. Commented el 13 dic. 2022 a las 23:44
  • Ahi modifique el codigo, al Javascript tambien lo cambie: agregue un div contenedor para cada par imagen/nombre fijate la funcion readFile(). Despues uso display: grid en esos contenedores y display: flex en el contenedor general. Y si te sirvio la respuesta marcala como util. Commented el 13 dic. 2022 a las 23:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.