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.

I'm starting to create the page, nothing is done yet. P.D.: I dont even want an AJAX solution for this, thanks! — Dionisio Barboza, Jul 06 '15 at 00:13

Henoc Díaz · Answer 1 · 2015-07-06T04:23:37.907

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

edited Jul 06 '15 at 04:23

answered Jul 06 '15 at 00:09

Henoc Díaz

43
1
8

You deeply know what I really mean!!! Hey Henoc tu eres el de CodigoFacilito no? – Dionisio Barboza Jul 06 '15 at 00:16
Whilst this may theoretically answer the question, [it would be preferable](//meta.stackoverflow.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. – Rohit Gupta Jul 06 '15 at 00:16
Sorry @RohitGupta, I'm new here answering questions :) It's better now? – Henoc Díaz Jul 06 '15 at 04:25
Yes, I'm @DionisioBarboza :D – Henoc Díaz Jul 06 '15 at 04:26
Henoc the Library is really helpful but I wanted to learn the "how to" from the basis, now I know the basis I will implement that Library you recommended me. – Dionisio Barboza Jul 10 '15 at 05:29

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

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.

edited May 23 '17 at 11:58

Community

1
1

answered Jul 06 '15 at 00:18

RokumDev

367
4
13

So canvas is the master key on this issue, I've never implemented canvas before, but this is a good beginning. Thanks, to all of you!!!! Tomorrow or the day after tomorrow I will be testing all the replies herein stated. – Dionisio Barboza Jul 06 '15 at 00:23
1

I took your recommendation and I surf the web looking for File API info, and that was the solution. Thanks – Dionisio Barboza Jul 10 '15 at 05:28
All right, don't forget mark as correct for other people found the response easily. – RokumDev Jul 10 '15 at 15:51

score 0 · Answer 3 · answered Jul 06 '15 at 00:56

 <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.

score 0 · Accepted Answer · answered Jul 06 '15 at 04:54

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"/>

Change an image from a File input without sending the form

4 Answers4

Linked