一段小代码，很简单用到了createObjectURL，不多解释了,注释都在上面
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript"> /** * 从 file 域获取 本地图片 url */ function getFileUrl(sourceId) { var url; if (navigator.userAgent.indexOf("MSIE")>=1) { // IE alert(document.getElementById(sourceId).value); url = document.getElementById(sourceId).value; } else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox //URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. //这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象. //File对象,就是一个文件,比如我用input type="file"标签来上传文件,那么里面的每个文件都是一个File对象. //Blob对象,就是二进制数据,比如通过new Blob()创建的对象就是Blob对象. //又比如,在XMLHttpRequest里,如果指定responseType为blob,那么得到的返回值也是一个blob对象. url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } else if(navigator.userAgent.indexOf("Chrome")>0) { // Chrome url = window.URL.createObjectURL(document.getElementById(sourceId).files.item(0)); } return url; } /** * 将本地图片 显示到浏览器上 */ function preImg(sourceId, targetId) { var url = getFileUrl(sourceId); var imgPre = document.getElementById(targetId); imgPre.src = url; } </script> </head> <body> <form action=""> <input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" /> <img id="imgPre" src="" width="300px" height="300px" style="display: block;" /> </form> </body> </html> |