Change an image from a File input without sending the form

Question

Brothers and Sisters.

Is there a way to change an IMG on HTML using as a src of the img a selected image from an input file tag without sending the form containing the IMG to the php ?

All I want to do is to see the preview of the image on the page before sending the settings on php to save the profile of the user.

Thanks in advance.

Answer 1

There is an awesome library from blueimp that do what you want. You only need to import the library:

<script src="js/load-image.all.min.js"></script>

and set an event handler for the [onchange event][4] of the desired input, like this:

document.getElementById('file-input').onchange = function (e) {
    var loadingImage = loadImage(
        e.target.files[0],
        function (img) {
            document.body.appendChild(img);
        },
        {maxWidth: 600}
    );
    if (!loadingImage) {
        // Alternative code ...
    }
};

First param is a File or Blob object or just an image URL, the second is a callback that receives one HTML image element if everything was correct and you can resize, crop or manipulate the object returned with a map of options as third param of the loadImage function.

In this example e.target is a reference to the object that dispatched the event. Take a look to the File API.

Important: For File or Blob objects as first param, this only works if browser supports URL API or FileReader.

Check the repo for more info: blueimp/JavaScript-Load-Image

Answer 2

For modern browsers you can use the FileReader API :

var inp = document.querySelector('input');
inp.addEventListener('change', function(e){
    var file = this.files[0];
    var reader = new FileReader();
    reader.onload = function(){
        document.getElementById('preview').src = this.result;
        };
    reader.readAsDataURL(file);
    },false);

<input type="file" accept="image/*"/>
<img id="preview"/>

Answer 3

Well, I've searching for your question and found this:

• First, you need to read the <input type="file"> so this reference will help you need this: Reading client side text file using Javascript, here they read the input and write in the DOM to canvas tag so you need this line: document.getElementById('file').addEventListener('change', readFile, false);

• Also in the readFile function you need to assign the src of the file to the <img> tag and like:

  function readFile (evt) { var files = evt.target.files; var file = files[0]; var img = document.getElementById('myimg'); img.src = file.src; }

make some tests and tell me if works.

Answer 4

 <input type="text" class="my-input" />
 <img src="#" class="preview" />

 $('.my-input').on('keyup', function() {
     $('.preview').attr('src', $(this).val());
 });

jsfiddle: https://jsfiddle.net/913bnkyq/

Inspect the img element in the dev tools in jsfiddle to see the src attribute getting updated real time as you type in the input.