CODEWITHSUNDEEP
javascripthtmljquery
Jonathan Bechtel
Jonathan Bechtel

Reputation: 3607

Can't get image to display via jQuery when it's being uploaded

Right now I have a url that displays an image when it's loaded. However, there will be an option for this image to be replaced via a form input. I would like the uploaded image to be displayed as soon as it's uploaded so it can be evaluated by the user.

I'm trying to accomplish this via jQuery, but I can't get it to work.

Here's my code:

HTML:

<div class="form-group">
   <label for="Image">Image</label>
   <input type="file" id="Image" name="Image" accept="image/*">
   <img src="..\{{ workshop_info[4] }}" id="output">
</div>

JQuery:

<script>
  $(document).ready(function() {
    $("#Image").change(function(e){
    $("#output").attr("src", e.target.files[0]);
    });
  });
</script>

Upvotes: 0

Views: 103

Answers (2)

CodeBug
CodeBug

Reputation: 1667

 <img src="../yourimage/path/image.jpeg" onclick="previmg()" id="displayimage" />
 <input type="file" class="form-control" onchange="selectedimg(this)" id="selectphoto" style="display: none" name="photo">
      </div>


function previmg(){
 document.querySelector('#selectphoto').click();
}

function selectedimg(e){
if(e.files[0]) {
 var reader = new FileReader();
 reader.onload = function(e) {
 document.querySelector('#displayimage').setAttribute('src', e.target.result);
}
 reader.readAsDataURL(e.files[0]);
}}

OR you can try this too,

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="image has to be load">

function previewFile() {
 const preview = document.querySelector('img');
 const file = document.querySelector('input[type=file]').files[0];
 const reader = new FileReader();
 reader.addEventListener("load", function () {
  preview.src = reader.result;
  }, false);
  if (file) {
   reader.readAsDataURL(file);
   }}

try this, both will work charm if any doubt feel free to ask.:-)

Upvotes: 1

Always Helping
Always Helping

Reputation: 14570

You can do this by using FileReader functionality.

I have recreated your example which displays an image when it's loaded

Once i upload my own image by clicking choose file and selected the file. That file will be getting previewed after selection with that image load_images div i created.

As soon as the file is selected i am replace the src of your existing image to the new src which come from readAsDataURL

You can read more about FileReader here in detail.

Working Demo: https://jsfiddle.net/usmanmunir/w5cbgLsk/

Run snippet below to see it working. 

$(function() {

  //Preview image function
  var previewImage = function(image) {
  
    if (image.files) {
     
     //Check all images
      var filesAmount = image.files.length;

      for (i = 0; i < filesAmount; i++) {
        var reader = new FileReader();
        reader.onload = function(event) {
          //Replace images on form upload selected image
          $('#output').attr('src', event.target.result)
        }
        reader.readAsDataURL(image.files[i]);
      }
    }

  };
  
  //Select image and call imagePreview function
  $('#Image').on('change', function() {
    previewImage(this);
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
  <label for="Image">Image</label>
  <input type="file" id="Image" name="Image" accept="image/*">
  <div class="load_images">
    <img src="http://mandarinazul.co/images/mandarinas.png" id="output">
  </div>
</div>

Upvotes: 1

Related Questions