CODEWITHSUNDEEP
javascriptjqueryhtml
user1477955
user1477955

Reputation: 1670

HTML5 - Create dynamically an image from a local path?

Is it possible to create an HTML image, if I have only a path to a local file? I tried to use a filereader, but the mere path does not work. how can I solve the issue?

JS

var reader = new FileReader();
reader.onload = {
     $('#myImg').attr('src', e.target.result);
};
   reader.readAsDataURL("file:///C:/Users/me/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg  ");

Upvotes: 0

Views: 2725

Answers (3)

assembly_wizard
assembly_wizard

Reputation: 2064

This is a simple tool I have made for reading files in JavaScript:

Fiddle

The JavaScript code is:

var reader = new FileReader();
reader.onerror = function(ev) {
    $('#output').html('=== Error reading file ===');
}
reader.onload = function(ev) {
    $('#output').html(ev.target.result);
};
reader.readAsDataURL(e.target.files[0]);

When you select an image file it will present you with a base64 dataURI of the image.

I recommend not trying to select a file that's not an image, I don't know what'll happen.

Upvotes: 2

bensonsearch
bensonsearch

Reputation: 312

something like this?

var x=document.createElement("img");
x.src="C:\data\images\test.jpg";
x.style.height="50px";
document.getElementById('whereimgoing').appendChild(x);

Also I should add that if this is on a website then it will depend highly on browser security

Upvotes: 0

Manuel Arwed Schmidt
Manuel Arwed Schmidt

Reputation: 3596

var reader = new FileReader();
reader.onload = function(e) {
 $('#myImg').attr('src', reader.result);
};
reader.readAsDataURL("file:///C:/Your/path/msohtmlclip1/01/clip_image002.jpg");

Should be fine, if access to local files is granted (check your browser settings or try if it works when deployed on a server (either localhost or www.yourserver.com).. Local files can always cause some troubles as browser behave differently. Also try to not use the temp folder.

Upvotes: -1

Related Questions