0

Having image preview option, that show the thumb of selected images.

Consider the below HTML,

html:

<input type="file" multiple accept="image/x-png,image/gif,image/jpeg" title="Upload Image" id="gallery_img" name="roomimage[]" />

Code used for previewing image in browser:

$(document).ready(function() {  
   if (window.File && window.FileList && window.FileReader) {
    $("#gallery").on("change", function(e) {        
        var fileName = document.getElementById("gallery").value;
        var idxDot = fileName.lastIndexOf(".") + 1;
        var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
        if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
        //TO DO
        var files = e.target.files,
        filesLength = files.length;
        for (var i = 0; i < filesLength; i++) {
            var f = files[i]
            var fileReader = new FileReader();
            fileReader.onload = (function(e) {
              var file = e.target;
              $("<span class=\"imgPreview\">" +
                "<img id=\"image\" name=\"image[]\" class=\"imageThumb\" src=\"" + e.target.result + "\"/>" +
                "<span class=\"remove icon-error\" title=\"Close\"></span>" +
                "</span>").insertAfter(".gallery_section");
              $(".remove").click(function(){
                $(this).parent(".imgPreview").remove();
              });
            });
            fileReader.readAsDataURL(f);
        }           
        }else{
            alert("Only jpg/jpeg and png files are allowed!");
        }   
        });
  } else {
    alert("Your browser doesn't support to File API")
  }
});

While choosing files with the above html all works fine. like i can select multiple images and i can upload that multiple images via ajax.

ajax:

var formData = new FormData($("#room_form")[0]);

var url=$("#room_form").attr("action");

$.ajax({
    method: "POST",
    data: formData,
    url: url,
    cache: false,
    contentType: false,
    processData: false,
})
.success(function(data) {
    loaderHide();

    setTimeout(function() {
        window.location.reload();
    }, 1000);


}).
fail(function(data) {
    loaderHide();
});

The all above works fine.

problem:

when i select 3 files. and im showing those 3 files in the preview. again i select another 2 files, now preview shows total 5 files. But in <input type="file" there will be only 2 files. i searched and found it is the default behavior.

Tried: Preview image: enter image description here

Preview code: enter image description here

In the image source im having original image as base 64 encoded image. i need to send this image to php file. how can i do this?

arun
  • 4,595
  • 5
  • 19
  • 39

1 Answers1

0

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


</head>
<body>
<input type="file" multiple accept="image/x-png,image/gif,image/jpeg" title="Upload Image" id="gallery_img" name="roomimage" />
<div class="gallery_section">
</body>
<script>
$(document).on('change','#gallery_img',function(evt){            
            var files = evt.target.files; // FileList object

            // Loop through the FileList and render image files as thumbnails.
            for (var i = 0, f; f = files[i]; i++) {

              // Only process image files.
              if (!f.type.match('image.*')) {
                return;
              }

              var reader = new FileReader();

              // Closure to capture the file information.
              reader.onload = (function(theFile) {
                return function(e) {
                  // Render thumbnail.
$('.gallery_section').append('<span class="imgPreview"><img id="image" name="image[]" class="imageThumb" src="'+e.target.result+'"><span class="remove icon-error" title="Close"></span></span>');
                };
              })(f);
              // Read in the image file as a data URL.
              reader.readAsDataURL(f);
            }           
          });
</script>
</html>
Jalin
  • 95
  • 7