<html>
<body>
<form name="Upload" enctype="multipart/form-data" method="post">
Filename: <INPUT type="file" id="submit">
<INPUT type="button" id="send" value="Upload">
</form>
<div id="div" align="center" style="height: 200px;width: 500px;border-style: ridge;border-color: red"></div>
</body>
<script type="text/javascript">
var img_id=0
var image = new Array()
document.getElementById('send').onclick=function()
{
img_id++
var id="imgid"+img_id
image = document.getElementById('submit').value;
document.getElementById('div').innerHTML="<img id='"+id+"' src='"+image+"' width=500px height=200px>"
}
</script>
</html>
problem with this code is that it’s only working in IE not in other browser(firefox,chrome,….etc)
Thanks in advance.
Edit:(updated my post in response to Naren, Bitslitter’s) Guys, here the text to add to the discussion posted below:
Thanks guys for the feedback, Naren and Bitslitter’s feedback was definitely enlightening.
Would you please recommend how to go about achieving what I want to do here:
In my web application, there is a button, upon clicking a button, a browser open dialogue box appears asking for a image file, user selects an image, the image opens in the web application. Its important for me to have the browser open the image from the local server, as I want to use the HTML5 canvas tag to read the pixels and then convert those pixels into SVG dynamically (using JS). It all sounds more complicated than it should be.
Web applications like Mugtug’s Darkroom (http://mugtug.com/darkroom/) have been able to achieve exactly what I want to.
I you load the page in Google Chrome, upload an image and hit Ctrl+Shift+J you will see the error message “Not allowed to load local resource” on the Error console. You can do somthing similar in FireFox with Firebug.
IE won’t show the local resources unless your internet security level is set to medium. Chrome and FireFox just won’t show content from local resources at all.