Necesito que los usuarios suban varias fotos, por separado y en orden, usando Html y Javascript. Debe haber un botón por carga de imagen.
He usado JQuery, pero solo funciona con un botón, no con varios.
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function(e) { $('#image1, #image2') .attr('src', e.target.result) .width(300) .height(); }; reader.readAsDataURL(input.files[0]); } } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container1"> <img src="..." alt="Profile Image1" id='image1' class="profileImg1"> <input type='file' class='uploader1' onchange="readURL(this);" /> <div class="overlay"> <i class="fas fa-pencil-alt text"></i> </div> </div> <div class="container2"> <img src="..." alt="Profile Image2" id='image2' class="profileImg2"> <input type='file' class='uploader2' onchange="readURL(this);" /> <div class="overlay"> <i class="fas fa-pencil-alt text"></i> </div> </div>Cambiaste ambas imágenes cada vez.
En lugar delegar
Tenga en cuenta que di la identificación de la imagen como un atributo de datos
También le sugiero que use ID únicos en lugar de nombres de clase únicos.
const readURL = function() { if (this.files && this.files[0]) { const reader = new FileReader(); const preview = this.dataset.preview; reader.onload = function(e) { $('#'+preview) .attr('src', e.target.result) .width(300) .height(); }; reader.readAsDataURL(this.files[0]); } } $(function() { $("#main").on("change", "[type=file]", readURL) }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="main"> <div class="container1"> <img src="..." alt="Profile Image1" id='image1' class="profileImg1"> <input type="file" id="uploader1" data-preview="image1" /> <div class="overlay"> <i class="fas fa-pencil-alt text"></i> </div> </div> <div class="container2"> <img src="..." alt="Profile Image2" id='image2' class="profileImg2"> <input type="file" id="uploader2" data-preview="image2" /> <div class="overlay"> <i class="fas fa-pencil-alt text"></i> </div> </div> </div>