I am not being able to change displayed image on file upload using javascript.This is my code:
<html>
<head>
<title> File Upload </title>
<script>
function uploadFile() {
document.getElementById('picturefield').src='file:///'+document.frmaddstudent.picturefile.src;
//document.getElementById('picturefield').src='http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-2/128/man-icon.png';
}
</script>
</head>
<body>
<b>Image</b>
<form name="frmaddstudent">
<img id="picturefield" src="file:///C:/Users/Nasim/Desktop/myimage.jpg">
<input type="file" name="picturefile" onchange="uploadFile()">
</form>
</body>
</html>
But the image is not being changed on file upload from my pc. The value of
document.frmaddstudent.picturefile.src
shows empty string as I debugged with firebug.
If I use
document.frmaddstudent.picturefile.value
instead of
document.frmaddstudent.picturefile.src,
then the value shows only the selected file name, but I need the full file path to set as the img src.
Can anyone please tell me what is the wrong thing I am doing here? Is there any easy solution in Javascript/jQuery to do this?
Modern browsers doesn’t support this feature of
input filefor security reasons.You would have to upload that file and then show it in
img