Preview images before upload

Question

I have a page with four images for the user to select. I want the user to be able to preview each image on the site before upload.

The JavaScript code below works for only one image but I would like it to work for multiple images uploaded via <input type="file"> .

What will be the best way to do this?

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#output').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#file-input").change(function () {
    readURL(this);
});

Answer 1

Here is jQuery version for you. I think it more simplest thing.

 $(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]); } } }; $('#gallery-photo-add').on('change', function() { imagesPreview(this, 'div.gallery'); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" multiple id="gallery-photo-add"> <div class="gallery"></div>

Answer 2

Add the multiple attribute to your input element.

Javascript

 function previewImages() { var preview = document.querySelector('#preview'); if (this.files) { [].forEach.call(this.files, readAndPreview); } function readAndPreview(file) { // Make sure `file.name` matches our extensions criteria if (!/\\.(jpe?g|png|gif)$/i.test(file.name)) { return alert(file.name + " is not an image"); } // else... var reader = new FileReader(); reader.addEventListener("load", function() { var image = new Image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendChild(image); }); reader.readAsDataURL(file); } } document.querySelector('#file-input').addEventListener("change", previewImages);

 <input id="file-input" type="file" multiple> <div id="preview"></div>

jQuery adaptation:

 function previewImages() { var $preview = $('#preview').empty(); if (this.files) $.each(this.files, readAndPreview); function readAndPreview(i, file) { if (!/\\.(jpe?g|png|gif)$/i.test(file.name)){ return alert(file.name +" is not an image"); } // else... var reader = new FileReader(); $(reader).on("load", function() { $preview.append($("<img/>", {src:this.result, height:100})); }); reader.readAsDataURL(file); } } $('#file-input').on("change", previewImages);

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="file-input" type="file" multiple> <div id="preview"></div>

More info on MDN readAsDataURL
StackOverflow Preview Image, get file size, image height and width before upload

Answer 3

Just use FileReader.readAsDataURL()

HTML:

<div id='photos-preview'></div>
<input type="file" id="fileupload" multiple (change)="handleFileInput($event.target.files)" />

JS:

 function handleFileInput(fileList: FileList) {
        const preview = document.getElementById('photos-preview');
        Array.from(fileList).forEach((file: File) => {
            const reader = new FileReader();
            reader.onload = () => {
              var image = new Image();
              image.src = String(reader.result);
              preview.appendChild(image);
            }
            reader.readAsDataURL(file);
        });
    }

DEMO

Answer 4

 function previewImages() { var preview = document.querySelector('#preview'); if (this.files) { [].forEach.call(this.files, readAndPreview); } function readAndPreview(file) { // Make sure `file.name` matches our extensions criteria if (!/\\.(jpe?g|png|gif)$/i.test(file.name)) { return alert(file.name + " is not an image"); } // else... var reader = new FileReader(); reader.addEventListener("load", function() { var image = new Image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendChild(image); }); reader.readAsDataURL(file); } } document.querySelector('#file-input').addEventListener("change", previewImages);

 <input id="file-input" type="file" multiple> <div id="preview"></div>

Answer 5

 $(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]); } } }; $('#gallery-photo-add').on('change', function() { imagesPreview(this, 'div.gallery'); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" multiple id="gallery-photo-add"> <div class="gallery"></div>

 function previewImages() { var preview = document.querySelector('#preview'); if (this.files) { [].forEach.call(this.files, readAndPreview); } function readAndPreview(file) { // Make sure `file.name` matches our extensions criteria if (!/\\.(jpe?g|png|gif)$/i.test(file.name)) { return alert(file.name + " is not an image"); } // else... var reader = new FileReader(); reader.addEventListener("load", function() { var image = new Image(); image.height = 100; image.title = file.name; image.src = this.result; preview.appendChild(image); }); reader.readAsDataURL(file); } } document.querySelector('#file-input').addEventListener("change", previewImages);

 <input id="file-input" type="file" multiple> <div id="preview"></div>

Answer 6

<script type="text/javascript">

var upcontrol = {
  queue : null, // upload queue
  now : 0, // current file being uploaded
  start : function (files) {
  // upcontrol.start() : start upload queue

    // WILL ONLY START IF NO EXISTING UPLOAD QUEUE
    if (upcontrol.queue==null) {
      // VISUAL - DISABLE UPLOAD UNTIL DONE
      upcontrol.queue = files;
      document.getElementById('uploader').classList.add('disabled');
      // PREVIEW UPLOAD IMAGES
       upcontrol.preview();*enter code here*
      //PROCESS UPLOAD ON CLICK 

    $('#add_files').on('click', function() {
       upcontrol.run();
    });
    }
  },
  preview : function() {
    //upcontrol.preview() : preview uploading file
        if (upcontrol.queue) {
            var filesAmount = upcontrol.queue.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                  var fimg = document.createElement('img') 
                    fimg.src =  event.target.result,
                      fimg.classList = "col-sm-6 col-md-6 col-lg-4 float-left center",
                      document.getElementById('gallery').appendChild(fimg);                
                }
                reader.readAsDataURL(upcontrol.queue[i]);
            }
        }
    },
  run : function () {
  // upcontrol.run() : proceed upload file

    var xhr = new XMLHttpRequest(),
        data = new FormData();
    data.append('file-upload', upcontrol.queue[upcontrol.now]);
    xhr.open('POST', './lockeroom/func/simple-upload.php', true);
    xhr.onload = function (e) {

      // SHOW UPLOAD STATUS
      var fstat = document.createElement('div'),

          txt = upcontrol.queue[upcontrol.now].name + " - ";
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          // SERVER RESPONSE
          txt += xhr.responseText;
        } else {
          // ERROR
          txt += xhr.statusText;
        }
      }
      fstat.innerHTML = txt;
      document.getElementById('upstat').appendChild(fstat);

      // UPLOAD NEXT FILE
      upcontrol.now++;
      if (upcontrol.now < upcontrol.queue.length) {
        upcontrol.run();
      }
      // ALL DONE
      else {
        upcontrol.now = 0;
        upcontrol.queue = null;
        document.getElementById('uploader').classList.remove('disabled');
      }
    };
    xhr.send(data);
  }
};

window.addEventListener("load", function () {
  // IF DRAG-DROP UPLOAD SUPPORTED
  if (window.File && window.FileReader && window.FileList && window.Blob) {
    /* [THE ELEMENTS] */
    var uploader = document.getElementById('uploader');

    /* [VISUAL - HIGHLIGHT DROP ZONE ON HOVER] */
    uploader.addEventListener("dragenter", function (e) {
      e.preventDefault();
      e.stopPropagation();
      uploader.classList.add('highlight');
    });
    uploader.addEventListener("dragleave", function (e) {
      e.preventDefault();
      e.stopPropagation();
      uploader.classList.remove('highlight');
    });

    /* [UPLOAD MECHANICS] */
    // STOP THE DEFAULT BROWSER ACTION FROM OPENING THE FILE
    uploader.addEventListener("dragover", function (e) {
      e.preventDefault();
      e.stopPropagation();
    });

    // ADD OUR OWN UPLOAD ACTION
    uploader.addEventListener("drop", function (e) {
      e.preventDefault();
      e.stopPropagation();
      uploader.classList.remove('highlight');
      upcontrol.start(e.dataTransfer.files);
    });
  }
  // FALLBACK - HIDE DROP ZONE IF DRAG-DROP UPLOAD NOT SUPPORTED
  else {
    document.getElementById('uploader').style.display = "none";
  }
});
</script>

i used somthing like this and i got the best result and easy to understand.

Answer 7

function appendRows(){
    $i++;
    var html='';
    html+='<div id="remove'+$i+'"><input type="file" name="imagefile[]" accept="image/*" onchange="appendloadFile('+$i+')"><img id="outputshow'+$i+'" height="70px" width="90px"><i onclick="deleteRows('+$i+')" class="fas fa-trash-alt"></i></div>';
     $("#appendshow").append(html);
}

function appendloadFile(i){
    var appendoutput = document.getElementById('outputshow'+i+'');
    appendoutput.src = URL.createObjectURL(event.target.files[0]);
}

Answer 8

 function previewMultiple(event){ var saida = document.getElementById("adicionafoto"); var quantos = saida.files.length; for(i = 0; i < quantos; i++){ var urls = URL.createObjectURL(event.target.files[i]); document.getElementById("galeria").innerHTML += '<img src="'+urls+'">'; } }

 #galeria{ display: flex; } #galeria img{ width: 85px; height: 85px; border-radius: 10px; box-shadow: 0 0 8px rgba(0,0,0,0.2); opacity: 85%; }

 <input type="file" multiple onchange="previewMultiple(event)" id="adicionafoto"> <div id="galeria"> </div>

Answer 9

https://stackoverflow.com/a/59985954/8784402

ES2017 Way

 // convert file to a base64 url const readURL = file => { return new Promise((res, rej) => { const reader = new FileReader(); reader.onload = e => res(e.target.result); reader.onerror = e => rej(e); reader.readAsDataURL(file); }); }; // for demo const fileInput = document.createElement('input'); fileInput.type = 'file'; const img = document.createElement('img'); img.attributeStyleMap.set('max-width', '320px'); document.body.appendChild(fileInput); document.body.appendChild(img); const preview = async event => { const file = event.target.files[0]; const url = await readURL(file); img.src = url; }; fileInput.addEventListener('change', preview);

Answer 10

 $(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]); } } }; $('#gallery-photo-add').on('change', function() { imagesPreview(this, 'div.gallery'); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" multiple id="gallery-photo-add"> <div class="gallery">

 $(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]); } } }; $('#gallery-photo-add').on('change', function() { imagesPreview(this, 'div.gallery'); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" multiple id="gallery-photo-add"> <div class="gallery">