<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="buexplain"> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <script src="jquery.js"></script> </head> <body> <input type="file" id="imgfile"> <img id="imgsrc" src=""> <script> $(function() { $("#imgsrc").hide(); $("#imgfile").change(function() { var objUrl = getObjectURL(this.files[0]); console.log("objUrl = " + objUrl); if (objUrl) { $("#imgsrc").attr("src", objUrl); $("#imgsrc").show(); } }); function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { // basic url = window.createObjectURL(file); } else if (window.URL != undefined) { // mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { // webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; } }); </script> </body> </html>