温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
  • 首页 > 
  • 教程 > 
  • 开发技术 > 
  • 如何解决使用js获取inputfile的绝对路径预览图片C:fakepath问题

如何解决使用js获取inputfile的绝对路径预览图片C:fakepath问题

发布时间:2021-09-27 10:37:25 来源:亿速云 阅读:163 作者:小新 栏目:开发技术

这篇文章主要为大家展示了“如何解决使用js获取inputfile的绝对路径预览图片C:fakepath问题”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何解决使用js获取inputfile的绝对路径预览图片C:fakepath问题”这篇文章吧。

1.问题

页面有一个input file服务器控件,一个p,p是image标签的容器,当点击input file的值改变,我们往p里追加image标签; 但当通过js的onchange事件动态获取input file 的路径的时候,发现console.log(path)打印出的路径是被浏览器屏蔽的,例如:C:fakepathfile.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.解决办法

functiongetObjectURL(file){varurl=null;if(window.createObjcectURL!=undefined){url=window.createOjcectURL(file);}elseif(window.URL!=undefined){url=window.URL.createObjectURL(file);}elseif(window.webkitURL!=undefined){url=window.webkitURL.createObjectURL(file);}returnurl;}//使用方法$("#file").change(function(){varfile=this.files[0];varurl=getObjectURL(file);//blob:http://doamin.com/5376c16a-02f9-489f-b30c-97a1808d5724});

以上是“如何解决使用js获取inputfile的绝对路径预览图片C:fakepath问题”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI