在上传到数据库之前显示预览图像

Question

I have a button called to add more images so that the user can add multiple images. Now, what I am doing, I have to display the preview image before uploading it to the database but it's not working as expected.

I referred to this link Preview images before upload

 $(document).ready(function() { var max_fields = 5; var wrapper = $(".input_fields_wrap.row"); var add_button = $(".add_field_button"); var x = 1; $(add_button).click(function(e) { e.preventDefault(); if (x < max_fields) { x++; $(wrapper).append('<div class="col-lg-4 mb-3"><div class="customfileWrap"><div class=" upload_file"><input type="file" name="slider[]" class="fileupload" multiple><span class="excel_upload_icon"></span><p id="file-name"></p><span class="upload_text"> Click here to upload file </span> <div class="gallery"></div></div><a href="#" class="remove_field"> &#10006; </a></div></div>'); } }); $(wrapper).on("click", ".remove_field", function(e) { e.preventDefault(); $(this).parent('div').parent('div').remove(); x--; }) }); $(function() { // Multiple images preview in browser var imagesPreview = function(input, placeToInsertImagePreview) { if (input.files) { var filesAmount = input.files.length; for (i = 0; i < filesAmount; i++) { var reader = new FileReader(); reader.onload = function(event) { $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview); } reader.readAsDataURL(input.files[i]); } } }; $('.fileupload').on('change', function() { imagesPreview(this, 'div.gallery'); }); });

 .upload_file { border: 3px dashed #042954; position: relative; text-align: center; padding: 20px; border-radius: 3px; background: #f9f9f9; height: 120px; }.upload_file input { position: absolute; width: 100%; height: 100%; left: 0; top: 0; outline: none; opacity: 0; cursor: pointer; }.remove_field { position: absolute; top: -10px; right: -10px; color: #fff; background-color: red; width: 22px; height: 22px; text-align: center; border-radius: 20px; }.upload_file img { width: 100px; }.customfileWrap { position: relative; }.remove_field { position: absolute; top: -10px; right: -10px; color: #fff; background-color: red; width: 22px; height: 22px; text-align: center; border-radius: 20px; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"> <section> <div class="container"> <div class="input_fields_wrap"> <button class="add_field_button mb-3">Add More Images</button> <div class="row"> <div class="col-lg-4 mb-3"> <div class="customfileWrap"> <div class=" upload_file"> <input type="file" name="slider[]" class="fileupload" multiple> <span class="excel_upload_icon"></span> <p id="file-name"></p> <span class="upload_text"> Click here to upload file </span> <:-- <img id="previewimg1" src="#" alt="" class="previewimg" /> --> <div class="gallery"></div> </div> </div> </div> </div> </div> </div> </section> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 1

The problem is that you haven't delegated the event handlers for dynamically generated file uploads:

$wrapper.on('change', '.fileupload', function() {
    imagesPreview(this, 'div.gallery');
});

 const max_fields = 5; const template = '<div class="col-lg-4 mb-3"><div class="customfileWrap"><div class=" upload_file"><input type="file" name="slider[]" class="fileupload" multiple><span class="excel_upload_icon"></span><p id="file-name"></p><span class="upload_text"> Click here to upload file </span> <div class="gallery"></div></div><a href="#" class="remove_field"> &#10006; </a></div></div>'; // Multiple images preview in browser const imagesPreview = function() { const input = this; const $placeToInsertImagePreview = $(this).parent().find('div.gallery'); if (input.files) { var filesAmount = input.files.length; for (let i = 0; i < filesAmount; i++) { var reader = new FileReader(); reader.onload = function(event) { $($.parseHTML('<img>')).attr('src', event.target.result).appendTo($placeToInsertImagePreview); } reader.readAsDataURL(input.files[i]); } } }; $(function() { const $wrapper = $(".input_fields_wrap.row"); const $add_button = $(".add_field_button"); let fileUploadCount = 1; $add_button.click(e => { e.preventDefault(); if (fileUploadCount < max_fields) { fileUploadCount++; $wrapper.append(template); } }); $wrapper.on('click', '.remove_field', function(e) { e.preventDefault(); $(this).closest('.customfileWrap').remove(); fileUploadCount--; }) $wrapper.on('change', '.fileupload', imagesPreview); });

 .upload_file { border: 3px dashed #042954; position: relative; text-align: center; padding: 20px; border-radius: 3px; background: #f9f9f9; height: 120px; }.upload_file input { position: absolute; width: 100%; height: 100%; left: 0; top: 0; outline: none; opacity: 0; cursor: pointer; }.remove_field { position: absolute; top: -10px; right: -10px; color: #fff; background-color: red; width: 22px; height: 22px; text-align: center; border-radius: 20px; }.upload_file img { width: 100px; }.customfileWrap { position: relative; }.remove_field { position: absolute; top: -10px; right: -10px; color: #fff; background-color: red; width: 22px; height: 22px; text-align: center; border-radius: 20px; }

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"> <section> <div class="container"> <div class="input_fields_wrap"> <button class="add_field_button mb-3">Add More Images</button> <div class="row"> <div class="col-lg-4 mb-3"> <div class="customfileWrap"> <div class=" upload_file"> <input type="file" name="slider[]" class="fileupload" multiple> <span class="excel_upload_icon"></span> <p id="file-name"></p> <span class="upload_text"> Click here to upload file </span> <:-- <img id="previewimg1" src="#" alt="" class="previewimg" /> --> <div class="gallery"></div> </div> </div> </div> </div> </div> </div> </section> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>