Here is my script to preview an image when its been selected on a webpage it works fine for the IE but don't work for FF. Code: <HTML> <HEAD> <TITLE>Visual Dice Demo</TITLE> <script language="javascript"> var imgRe = /^.+\.(jpg|jpeg|gif|png)$/i; function previewImage(pathField, previewName) { var path = pathField.value; if (path.search(imgRe) != -1) { document.getElementById("ee").innerHTML = "<img src="+path+" width=\"100\" height=\"100\">"; } else { alert("JPG, PNG, and GIFs only!"); } } </script> </HEAD> </BODY> <form name="imageTest"> <input type="file" name="myImage" size="30" onChange="previewImage(document.imageTest.myImage,'replaceMe')"/> </form> <div id="ee"> </div> </HTML> Code (markup): Please have a look on code and suggest. thank you dizyn
Errors: 1. body tag ends right after the head ending tag !! 2. your script doesn't have the type attribute set, only the language attribute. When I tried it with Firefox with the type attribute set it worked, as you can see from the image attached. so, your code should look like this: <html> <head> <title>Visual Dice Demo</title> <script type="text/javascript"> var imgRe = /^.+\.(jpg|jpeg|gif|png)$/i; function previewImage(pathField, previewName) { var path = pathField.value; if (path.search(imgRe) != -1) { document.getElementById("ee").innerHTML = "<img src="+path+" width=\"100\" height=\"100\">"; } else { alert("JPG, PNG, and GIFs only!"); } } </script> </head> <body> <form name="imageTest"> <input type="file" name="myImage" size="30" onchange="previewImage(document.imageTest.myImage,'replaceMe')" /> </form> <div id="ee"> </div> </body> </html> Code (markup):