Skip to main content
se añadieron 418 caracteres en el cuerpo
Origen Enlace
infinit3Loop__
  • 3.6k
  • 2
  • 5
  • 20
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>";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>
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 =
        '<img width="100" src="' +
        reader.result + // ponemos el resultado del reader como src de la imagen
        '" />' +
        "<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.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;
}

.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>
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>
Origen Enlace
infinit3Loop__
  • 3.6k
  • 2
  • 5
  • 20

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 =
        '<img width="100" src="' +
        reader.result + // ponemos el resultado del reader como src de la imagen
        '" />' +
        "<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.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;
}

.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.