1.问题
页面有一个input file服务器控件,一个div,div是image标签的容器,当点击input file的值改变,我们往div里追加image标签;
但当通过js的onchange事件动态获取input file 的路径的时候,发现console.log(path)打印出的路径是被浏览器屏蔽的,例如:C:\fakepath\file.jpg
2.原因
由于浏览器的安全机制,当我们获取input file的路径时被fakepath代替,隐藏了真实物理路径。
当然,调整浏览器的浏览器安全设置可以解决这个问题,但是这种解决办法显然不是我们想要的,不可能让每个用于都去设置浏览器安全选项。
3.认识window.URL.createObjectURL()
URL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL,这个URL的生命仅存在于它被创建的这个文档里,新的对象URL指向执行的File对象或Blob对象。
语法:
1 |
objcetURL = window.URL.createObjectURL(file || blob); |
参数:File对象和Blob对象;File对象就是一个文件,比如我用file type=”file”标签来上传文件,那么里面的每个文件都是一个file对象。Blob对象就是二进制数据,比如在XMLHttpRequest里,如果指定requestType为blob,那么得到的返回值也是一个blob对象。
每次调用createObjectURL的时候,一个新的URL对象就被创建了。即使你已经为同一个文件创建过一个URL.,如果你不再需要这个对象,要释放它,需要使用URL.revokeObjectURL()方法.。当页面被关闭,浏览器会自动释放它,但是为了最佳性能和内存使用,当确保不再用得到它的时候,就应该释放它。
4.解决办法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(document).on('change', '#PictureUrl', function () { //PictureUrl为input file 的id //console.log(this.files[0]); function getObjectURL(file) { var url = null; if (window.createObjcectURL != undefined) { url = window.createOjcectURL(file); } else if (window.URL != undefined) { url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL(file); } return url; } var objURL = getObjectURL(this.files[0]);//这里的objURL就是input file的真实路径 $('#imgContainer').html("<img src='" + objURL + "' alt='Alternate Text' width='640px' height='350px' id='target' />"); cutImg();//自定义的裁剪图片函数 }); |
5.实例
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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Keywords" content="" /> <title>真正兼容IE、Firefox、Chrome的文件选择input file按钮美化CSS代 - JS代码网</title> <style> .new-contentarea { width: 100%; overflow:hidden; margin: 0 auto; position:relative; } .new-contentarea label { width:100%; height:100%; display:block; } .new-contentarea input[type=file] { width:188px; height:60px; background:#333; margin: 0 auto; position:absolute; right:50%; margin-right:-94px; top:0; right/*\**/:0px\9; margin-right/*\**/:0px\9; width/*\**/:10px\9; opacity:0; filter:alpha(opacity=0); z-index:2; } a.upload-img{ width:165px; display: inline-block; margin-bottom: 10px; height:57px; line-height: 57px; font-size: 20px; color: #FFFFFF; background-color: #f38e81; border-radius: 3px; text-decoration:none; cursor:pointer; } a.upload-img:hover{ background-color: #ec7e70; } .tc{text-align:center;} .hide{ display:none; } </style> </head> <body> <div class="new-contentarea tc"> <p id="image" class="hide"> <img class="cover-radius" src="./upload_img.png" width="30%"/> </p> <p> <a href="javascript:void(0)" class="upload-img"><label for="upload-file">选择图片</label></a> <input type="file" class="" name="upload-file" id="upload-file" /> </p> </div> </body> <script src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.js" type="text/javascript" ></script> <script> $(document).ready(function($){ //判断当前IE是否小于9 function islt9(){ var theUA = window.navigator.userAgent.toLowerCase(); if ((theUA.match(/msie\s\d+/) && theUA.match(/msie\s\d+/)[0]) || (theUA.match(/trident\s?\d+/) && theUA.match(/trident\s?\d+/)[0])) { var ieVersion = theUA.match(/msie\s\d+/)[0].match(/\d+/)[0] || theUA.match(/trident\s?\d+/)[0]; if (ieVersion < 9) { return 1; //document.execCommand("Stop"); }; } } //封装成一个函数获,传入this.files[0],返回真实本地路径 function getObjectURL(file) { var url = null; if (window.createObjcectURL != undefined) { url = window.createOjcectURL(file); } else if (window.URL != undefined) { url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { url = window.webkitURL.createObjectURL(file); } return url; } $('#upload-file').change(function(event) { var objURL; //低级浏览器可能没有安全问题,直接显示真实路径,即没有C:\fakepath的问题 if (1==islt9()) { objURL=$(this).val(); }else{ objURL=getObjectURL(this.files[0]);//这里的objURL就是input file的真实路径 }; $('#image img').attr('src', objURL); //给<input>的src赋值去显示图片 $('#image').removeClass('hide'); }); }); </script> </html> |