onchange file input change img src and change image color

Question

onchange event is not working. What am I supposed to do to get result on same page. I dont want to redirect to any other page to upload image. Is this issue is because of opencart? I dont know if it is correct to write like this in cpanel. I am using opencart and cpanel. Is there any other way?

HTML

 <input type='file' id="upload" onchange="readURL(this.value)" />
    <img id="img" src="#" alt="your image" />

script

function readURL(input) {
var url = input.value;
var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
    var reader = new FileReader();

    reader.onload = function (e) {
        $('#img').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
}
else{
     $('#img').attr('src', '/assets/no_preview.png');
  }
}

JSFiddle

@logan yes. http://jsfiddle.net/stN8U/1/ this solved my problem Thank you. — Jill, Jul 19 '14 at 09:07
if the answer provided is helpful accept the answer which suites you better. — logan Sarav, Jul 19 '14 at 10:11

score 53 · Answer 1 · edited Aug 01 '17 at 21:41

You need to send this object only instead of this.value while calling onchange

<input type='file' id="upload" onchange="readURL(this)" />

because you are using input variable as this in your function, like at line

var url = input.value;// reading value property of input element

Working DEMO

EDIT - Try using jQuery like below --

remove onchange from input field :

<input type='file' id="upload" >

Bind onchange event to input field :

$(function(){
  $('#upload').change(function(){
    var input = this;
    var url = $(this).val();
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
     {
        var reader = new FileReader();

        reader.onload = function (e) {
           $('#img').attr('src', e.target.result);
        }
       reader.readAsDataURL(input.files[0]);
    }
    else
    {
      $('#img').attr('src', '/assets/no_preview.png');
    }
  });

});

jQuery Demo

http://jsfiddle.net/M3kj6/1/ and http://jsfiddle.net/stN8U/1/ both works well for me. Thank you. and also any suggestions for how to change image color only flash or photoshop is option for this or is there any other option?? — Jill, Jul 19 '14 at 08:04
yes this will work, ultimately you are binding change event to file input and calling function (which do rest of the task). The same thing I mentioned in my answer but put all code inside bind function and not in seperate javascrpt function. — Bhushan Kawadkar, Jul 19 '14 at 08:08

score 49 · Answer 2 · answered Jun 26 '19 at 16:41

49

Simple Solution. No Jquery

<img id="output" src="" width="100" height="100">

<input name="photo" type="file" accept="image/*" onchange="document.getElementById('output').src = window.URL.createObjectURL(this.files[0])">

answered Jun 26 '19 at 16:41

Arif

927
9
9

In some cases, the image does not update straightaway. If I add some more code to the event `onchange`, it might run on the previous copy of the image. Is there a way to wait for the image to upload? – Simone Jan 27 '21 at 05:30

Yacine MEDDAH · Answer 3 · 2019-04-16T07:47:03.507

in your HTML : <input type="file" id="yourFile"> don't forget to reference your js file or put the following script between <script></script> in your script :

var fileToRead = document.getElementById("yourFile");

fileToRead.addEventListener("change", function(event) {
    var files = fileToRead.files;
    if (files.length) {
        console.log("Filename: " + files[0].name);
        console.log("Type: " + files[0].type);
        console.log("Size: " + files[0].size + " bytes");
    }

}, false);

Sankar Jay · Answer 4 · 2014-07-21T19:00:16.427

2

Try with this code, you will get the image preview while uploading

<input type='file' id="upload" onChange="readURL(this);"/>
<img id="img" src="#" alt="your image" />

 function readURL(input){
 var ext = input.files[0]['name'].substring(input.files[0]['name'].lastIndexOf('.') + 1).toLowerCase();
if (input.files && input.files[0] && (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) 
    var reader = new FileReader();
    reader.onload = function (e) {
        $('#img').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
}else{
     $('#img').attr('src', '/assets/no_preview.png');
}
}

edited Jul 21 '14 at 19:00

answered Jul 21 '14 at 18:55

Sankar Jay

196
1
4

This answer is the same as [the main answer](https://stackoverflow.com/a/24837700/2074077), basically stole it from the solution provider for points. Not cool imo. – Kalob Taulien Feb 24 '19 at 19:44

score 2 · Answer 5 · answered Jul 22 '19 at 12:50

Below solution tested and its working, hope it will support in your project.
HTML code:
    <input type="file" name="asgnmnt_file" id="asgnmnt_file" class="span8" 
    style="display:none;" onchange="fileSelected(this)">
    <br><br>
    <img id="asgnmnt_file_img" src="uploads/assignments/abc.jpg" width="150" height="150" 
    onclick="passFileUrl()" style="cursor:pointer;">

JavaScript code:
    function passFileUrl(){
    document.getElementById('asgnmnt_file').click();
    }

    function fileSelected(inputData){
    document.getElementById('asgnmnt_file_img').src = window.URL.createObjectURL(inputData.files[0])
    }

onchange file input change img src and change image color

5 Answers5

Linked

Related