get value from html input field on insert to src tag using jquery

Question

I have an input field in which I am inserting value through browse button now i want to copy that value from input field to an src tag so that i can preview the image which user has just uploaded

here is my code

<input class="text-input" type="text" name="logo" id="logo" onclick="tinyBrowserPopUp('image','logo','client_logos');"/>

I want to copy selected value from above input field to

<img src="myimage" />

Add code. What have you done so far? What didn't work? This sound like something that should be done on the server-side, as simply inserting a filename into an `` field doesn't 'upload' it. — Sumurai8, Jul 05 '13 at 20:16
You can't access files from user's file system directly. Read about FileReader API. Take a look at this example: http://jsfiddle.net/VM7sy/ . Read [more](https://developer.mozilla.org/en-US/docs/Web/API/FileReader). — dfsq, Jul 05 '13 at 20:18
$("input[name='logo']").change( function() { }); i am using this but this works for input which we type through keyboard not works for select in my case — Tousif, Jul 05 '13 at 20:18
no actually the file axist already on server as you see I have included tinybrowser, on click function tiny browser uploads the file in my image directory and then return the path to input value name="logo" — Tousif, Jul 05 '13 at 20:25

Mohammad Areeb Siddiqui · Accepted Answer · 2013-07-05T22:09:42.447

1

You just can't directly show it from the user's computer instead you will need to first upload it to your server and then show it. Uploading the file using ajax would create the same effect you want. Also take a look at: FileReader API @ MDN

Update: As you have the image already on the server try the code below

Try this code:

HTML:

<input class="text-input" type="text" name="logo" id="logo" onclick="tinyBrowserPopUp('image','logo','client_logos');" />
<img src="myimage" />

JS:

setInterval(react, 5000);
function react() {
    document.getElementByTagName("img").src = document.getElementByName("logo").value;
}

edited Jul 05 '13 at 22:09

answered Jul 05 '13 at 20:21

Mohammad Areeb Siddiqui

9,795
14
71
113

no actually the file axist already on server as you see I have included tinybrowser, on click function tiny browser uploads the file in my image directory and then return the path to input value name="logo" – Tousif Jul 05 '13 at 20:25
onchange works only when we type something in input field (through keyboard) in this case we are not gonna write anything we just select file from tinybrowser and then all of the path appears in input field onchange fails until we click in input box and write something – Tousif Jul 05 '13 at 21:01
OK! let me check other methods as well! if you know one edit my answer I will approve it :) – Mohammad Areeb Siddiqui Jul 05 '13 at 21:03
can you post your tiny brows.... function please :) it would make it easier for me :) – Mohammad Areeb Siddiqui Jul 05 '13 at 21:04
yes y not here is the function function tinyBrowserPopUp(type,formelementid,folder) { tburl = "/admin/tinybrowser/tinybrowser.php" + "?type=" + type + "&feid=" + formelementid; if (folder !== undefined) tburl += "&folder="+folder+"%2F"; newwindow=window.open(tburl,'tinybrowser','height=495,width=785,scrollbars=yes,resizable=yes'); if (window.focus) {newwindow.focus()} return false; } – Tousif Jul 05 '13 at 21:20
try changing "type" in "tburl" to "img" instead of 'image' – Mohammad Areeb Siddiqui Jul 05 '13 at 21:27
I don't know either it's a good method or not but it works for me setInterval(react, 5000); function react() { $('#im_preview').attr('src',$("input[name='logo']").val()); } after every 5 second interval react function execute and when it gets path it pass to src tag – Tousif Jul 05 '13 at 21:46
Please see http://stackoverflow.com/questions/2389341/jquery-change-event-to-input-file-on-ie – Marco Sulla Jul 06 '13 at 09:19

Marco Sulla · Answer 2 · 2013-07-05T20:54:30.270

0

Add an id to the img tag and use

var imagepath = $('#logo').val();
$('#myimg').attr('src', imagepath);

inside the function you fire when the input is changed

edited Jul 05 '13 at 20:54

answered Jul 05 '13 at 20:49

Marco Sulla

15,299
14
65
100

Joseph Astrahan · Answer 3 · 2013-12-12T04:23:03.597

I got this working with the code below. I like to put the functions on body so that even if the class is added afterwards via AJAX the "change" command will still trigger the event.

My approach does use jQuery.

HTML:

<input class="text-input" class="classhere" type="text" name="logo" id="logo" />
<div class="imagearea"></div>

JS:

$("body").on("change",".classhere",function(){
  //Equivalent of getElementById
  var fileInput = $(this)[0];//returns a HTML DOM object by putting the [0] since it's really an associative array.
  var file = fileInput.files[0]; //there is only '1' file since they are not multiple type.

  var reader = new FileReader();
  reader.onload = function(e) {
       // Create a new image.
       var img = new Image();

       img.src = reader.result;
       $(".imagearea").html(img);
   }

   reader.readAsDataURL(file);//attempts to read the file in question.
});

This approach uses the HTML5 File System API's to read the image and put it into a new javascript img object. The key here is readAsDataURL. If you use chrome inspector you will notice the images are stored in base64 encoding.

The reader is Asynchronous, this is why it uses the callback function onload. So make sure any important code that requires the image is inside the onLoad or else you may get unexpected results.

get value from html input field on insert to src tag using jquery

3 Answers3