使用js获取input file的绝对路径预览图片C:\fakepath\问题

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对象。 
语法:objcetURL = window.URL.createObjectURL(file || blob); 
参数:File对象和Blob对象;File对象就是一个文件,比如我用file type=”file”标签来上传文件,那么里面的每个文件都是一个file对象。Blob对象就是二进制数据,比如在XMLHttpRequest里,如果指定requestType为blob,那么得到的返回值也是一个blob对象。 
每次调用createObjectURL的时候,一个新的URL对象就被创建了。即使你已经为同一个文件创建过一个URL.,如果你不再需要这个对象,要释放它,需要使用URL.revokeObjectURL()方法.。当页面被关闭,浏览器会自动释放它,但是为了最佳性能和内存使用,当确保不再用得到它的时候,就应该释放它。

4.解决办法

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;  
 }
 //使用方法
 $("#file").change(function(){
     var file = this.files[0];
     var url = getObjectURL(file);//blob:http://doamin.com/5376c16a-02f9-489f-b30c-97a1808d5724
 });
  • 0
    点赞
  • 3
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值