Hello, there is a code for previewing images on the site and the problem is that I add another image to the code, then it loads not in the right place and with the repetition of the first:

var filestoupload = []; function previewFiles() { var preview = document.querySelector('#preview'); var files = document.querySelector('input[type=file]').files; function readAndPreview(file) { // Make sure `file.name` matches our extensions criteria if (/\.(jpe?g|png|gif)$/i.test(file.name)) { var reader = new FileReader(); reader.addEventListener("load", function() { var image = new Image(); image.height = 100; image.title = file.name; image.src = this.result; filestoupload.push(this.result) var div= document.createElement('div'); var divdel= document.createElement('div'); divdel.className='delete' divdel.innerHTML='<i class="fa fa-times" aria-hidden="true"></i>' div.className='fileprew' div.appendChild(divdel); div.appendChild(image); preview.appendChild(div); console.log('files to upload: ', filestoupload.length) }, false); reader.readAsDataURL(file); } } if (files) { [].forEach.call(files, readAndPreview); } } $('body').on("click", ".delete", function() { index=$(this).index(); console.log('удаляем файл: ',index) filestoupload.splice(index, 1); $(this).parent().remove(); console.log('files to upload: ', filestoupload.length) }); 
 .upload-file-container:first-child { margin-left: 0; } .upload-file-container > img { width: 160px; height: 160px; margin-left: 55px; border-radius: 55%; } .upload-file-container-text{ font-family: Arial, sans-serif; font-size: 12px; color: #719d2b; line-height: 17px; text-align: center; display: block; position: absolute; left: 0; bottom: 0; width: 100px; height: 35px; } .upload-file-container-two:first-child { margin-left: 0; } .upload-file-container-two > img { width: 160px; height: 160px; margin-left: 55px; border-radius: 55%; } .upload-file-container-text-two{ font-family: Arial, sans-serif; font-size: 12px; color: #719d2b; line-height: 17px; text-align: center; display: block; position: absolute; left: 0; bottom: 0; width: 100px; height: 35px; } .file_upload_two { overflow: hidden; background: #eee; border: 1px solid #ccc; font-size: 23px; line-height: 1.65; text-align: center; /* padding: 20px; */ width: 95px; top: 96px; height: 40px; width: 60vw; margin-left: 14px; border-radius: 20px; border-color: rgba(0, 0, 255, 0.18); color: #efefef; background-color: rgb(30, 190, 190); text-shadow: -1px 0px 2px black; font-family: sans-serif; font-weight: bold; transition: all 0.3s cubic-bezier(.25,.8,.25,1); } .file_upload_two:hover { box-shadow: 0px 2px 2px 1px #6a6666; color: white; cursor: pointer; } .file_upload_two input[type=file] { position: relative; top: -40px; line-height: 0px; right: 0; font-size: 200px; opacity: 0; filter: alpha(opacity=0); cursor: pointer; height: 0; cursor: pointer; } .file_upload { overflow: hidden; background: #eee; border: 1px solid #ccc; font-size: 23px; line-height: 1.65; text-align: center; /* padding: 20px; */ width: 95px; top: 96px; height: 40px; width: 30vw; margin-left: 14px; border-radius: 20px; border-color: rgba(0, 0, 255, 0.18); color: #efefef; background-color: rgb(30, 190, 190); text-shadow: -1px 0px 2px black; font-family: sans-serif; font-weight: bold; transition: all 0.3s cubic-bezier(.25,.8,.25,1); } .file_upload:hover { box-shadow: 0px 2px 2px 1px #6a6666; color: white; cursor: pointer; } .file_upload input[type=file] { position: relative; top: -40px; line-height: 0px; right: 0; font-size: 200px; opacity: 0; filter: alpha(opacity=0); cursor: pointer; height: 0; cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="preview"></div> <br> <div class="file_upload"> Добавить<input type="file" class="photo" id="photo" name="photo[]" onchange="previewFiles()" multiple/></div> <br><br><br> <div class="file_upload_two"><i class="fa fa-camera" aria-hidden="true"></i> Подгрузить документы<input type="file" class="photoDoc" id="doc" name="doc[]" onchange="previewFiles()" multiple/></div> </div> <div id="preview"></div> </div>

  • What does "not where it is necessary" mean? In the snippet images are added normally, without repetitions. - br3t
  • Try to add one photo through the button first, and load the second one via the button. Let it be two different images - Vlad

1 answer 1

Your problem is that

 var files = document.querySelector('input[type=file]').files;

always refers to the first input. So even if you add an image through the second, then the preview from the first image falls.

You can avoid this by passing the context (the input for which readAndPreview is readAndPreview ), or hang one EventListener on the input and use the full-blown this . In the first case, the code will be as follows:

 var filestoupload = []; function previewFiles(context) { // пробрасываем контекст var preview = document.querySelector('#preview'); var files = context.files; // используем контекст function readAndPreview(file) { // Make sure `file.name` matches our extensions criteria if (/\.(jpe?g|png|gif)$/i.test(file.name)) { var reader = new FileReader(); reader.addEventListener("load", function() { var image = new Image(); image.height = 100; image.title = file.name; image.src = this.result; filestoupload.push(this.result); var div = document.createElement('div'); var divdel = document.createElement('div'); divdel.className = 'delete'; divdel.innerHTML = '<i class="fa fa-times" aria-hidden="true"></i>'; div.className = 'fileprew'; div.appendChild(divdel); div.appendChild(image); preview.appendChild(div); console.log('files to upload: ', filestoupload.length); }, false); reader.readAsDataURL(file); } } if (files) { [].forEach.call(files, readAndPreview); } } $('body').on("click", ".delete", function() { index = $(this).index(); console.log('удаляем файл: ', index); filestoupload.splice(index, 1); $(this).parent().remove(); console.log('files to upload: ', filestoupload.length); }); 
 .upload-file-container:first-child { margin-left: 0; } .upload-file-container>img { width: 160px; height: 160px; margin-left: 55px; border-radius: 55%; } .upload-file-container-text { font-family: Arial, sans-serif; font-size: 12px; color: #719d2b; line-height: 17px; text-align: center; display: block; position: absolute; left: 0; bottom: 0; width: 100px; height: 35px; } .upload-file-container-two:first-child { margin-left: 0; } .upload-file-container-two>img { width: 160px; height: 160px; margin-left: 55px; border-radius: 55%; } .upload-file-container-text-two { font-family: Arial, sans-serif; font-size: 12px; color: #719d2b; line-height: 17px; text-align: center; display: block; position: absolute; left: 0; bottom: 0; width: 100px; height: 35px; } .file_upload_two { overflow: hidden; background: #eee; border: 1px solid #ccc; font-size: 23px; line-height: 1.65; text-align: center; /* padding: 20px; */ width: 95px; top: 96px; height: 40px; width: 60vw; margin-left: 14px; border-radius: 20px; border-color: rgba(0, 0, 255, 0.18); color: #efefef; background-color: rgb(30, 190, 190); text-shadow: -1px 0px 2px black; font-family: sans-serif; font-weight: bold; transition: all 0.3s cubic-bezier(.25, .8, .25, 1); } .file_upload_two:hover { box-shadow: 0px 2px 2px 1px #6a6666; color: white; cursor: pointer; } .file_upload_two input[type=file] { position: relative; top: -40px; line-height: 0px; right: 0; font-size: 200px; opacity: 0; filter: alpha(opacity=0); cursor: pointer; height: 0; cursor: pointer; } .file_upload { overflow: hidden; background: #eee; border: 1px solid #ccc; font-size: 23px; line-height: 1.65; text-align: center; /* padding: 20px; */ width: 95px; top: 96px; height: 40px; width: 30vw; margin-left: 14px; border-radius: 20px; border-color: rgba(0, 0, 255, 0.18); color: #efefef; background-color: rgb(30, 190, 190); text-shadow: -1px 0px 2px black; font-family: sans-serif; font-weight: bold; transition: all 0.3s cubic-bezier(.25, .8, .25, 1); } .file_upload:hover { box-shadow: 0px 2px 2px 1px #6a6666; color: white; cursor: pointer; } .file_upload input[type=file] { position: relative; top: -40px; line-height: 0px; right: 0; font-size: 200px; opacity: 0; filter: alpha(opacity=0); cursor: pointer; height: 0; cursor: pointer; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="preview"></div> <br> <div class="file_upload"> Добавить<input type="file" class="photo" id="photo" name="photo[]" onchange="previewFiles(this)" multiple/></div> <br><br><br> <div class="file_upload_two"><i class="fa fa-camera" aria-hidden="true"></i> Подгрузить документы<input type="file" class="photoDoc" id="doc" name="doc[]" onchange="previewFiles(this)" multiple/></div>