input file获取文件路径时无法获取正确的路径

页面有一个input file服务器控件,一个div,div是image标签的容器,当点击input file的值改变,我们往div里追加image标签;但当通过js的onchange事件动态获取input file 的路径的时候,发现console.log(path)打印出的路径是被浏览器屏蔽的,

例如:C:\fakepath\file.jpg
input  file获取文件路径时无法获取正确的路径

这是由于浏览器的安全机制,input file的路径被fakepath代替,隐藏了真实物理路径。
解决方法
(1)调整浏览器的浏览器安全设置(不推荐,也不合理)。
(2)使用window.URL.createObjectURL()

var url = null;
var fileObj = document.getElementById("aptitude").files[0];
if (window.createObjcectURL != undefined) {
   url = window.createOjcectURL(fileObj);
} else if (window.URL != undefined) {
   url = window.URL.createObjectURL(fileObj);
} else if (window.webkitURL != undefined) {
  url = window.webkitURL.createObjectURL(fileObj);
}

解释:
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()方法.。当页面被关闭,浏览器会自动释放它,但是为了最佳性能和内存使用,当确保不再用得到它的时候,就应该释放它。
(3)使用FileReader.readAsDataURL()

function ii(obj)
   var oFReader = new FileReader();
   var file = obj.files[0];
   oFReader.readAsDataURL(file);
   oFReader.onloadend = function (oFRevent) {
       src = oFRevent.target.result;
   };
}

解释:
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
异步读取指定的Blob中的内容,一旦完成,会返回一个data: URL格式的字符串以表示所读取文件的内容。
window.URL.createObjectURL()和FileReader.readAsDataURL()的区别
返回值
FileReader.readAsDataURL(blob)可以得到一段base64的字符串
URL.createObjectURL(blob)得到的是当前文件的一个内存url
内存使用
FileReader.readAsDataURL(blob)得到一段超长的base64的字符串
URL.createObjectURL(blob)得到的是一个url地址
内存清理
FileReader.readAsDataURL(blob)依照js垃圾回收机制自动从内存中清理
URL.createObjectURL(blob)存在于当前document内,清除方式只有upload()事件或者revokeObjectURL()手动清除
执行方式
FileReader.readAsDataURL(blob)通过回调的方式f返回,异步执行;
URL.createObjectURL(blob) 直接返回,同步执行;
多个文件
FileReader.readAsDataURL(blob)同时处理多个文件时,需要一个文件对应一个FileReader对象;
URL.createObjectURL(blob) 依次返回,没有影响;

总结:

URL.createObjectURL(blob) 得到本地内存容器的URL地址,方便预览,多次使用需要注意手动释放内存的问题,性能优秀。
FileReader.readAsDataURL(blob)胜在直接转为base64格式,可以直接用于业务,无需二次转换格式。

本文来自投稿,不代表125jz立场,如若转载,请注明出处:http://www.125jz.com/4197.html

(5)
孤城丨浪子的头像孤城丨浪子普通用户
上一篇 2019年11月13日 上午8:08
下一篇 2019年11月16日 上午10:01

99%的人还看了以下文章

  • jsp:include包含html文件出现中文乱码的解决方法

    在admin.jsp页面使用<jsp:include page=”left.html”/>包含了一个HTML页面,代码如下 <div id=”left”><jsp:include page=”left.html”/></div> 出现中文乱码: admin.jsp本身没有中文乱码 &lt…

    2019年11月29日
    4.1K0
  • 国内github网站打不开的解决方法(验证100%解决)

    最近国内访问github.com经常打不开,无法访问。 github网站打不开的解决方法 1.打开网站http://tool.chinaz.com/dns/ ,在A类型的查询中输入 github.com,找出最快的IP地址。 2.修改hosts文件。 在hosts文件中添加: # localhost name resolution is handled wi…

    2022年2月1日 编程开发
    21.1K0
  • 精典Arduino入门小项目-手机APP控制LED灯

    本文主要介绍了一个典型的Arduino入门小项目-手机APP控制LED灯,包括需要的硬件、软件(提供下载地址),源码,只需根据教程操作,就能做出一个完整项目!

    2023年2月3日
    2.9K0
  • python 循环语句的应用:水仙花数判断及爱因斯坦阶梯编程

    一、水仙花数判断程序 1.任务内容: 水仙花数是一个三位整数,如153是一个水仙花数,是因为该数的百位的立方、十位的立方、个位的立方和等于该数本身,如下所示: 2.程序编写要求: 使用for语句完成; 统计水仙花数个数的值保存到变量中,要求自动进行统计 •输出结果如下所示: 153 是水仙数370 是水仙数371 是水仙数407 是水仙数三位数中有4个水仙数…

    2022年5月11日
    3.2K1
  • 第4课:标识符和关键字

     1.标识符 在程序中使用的变量名、函数名、标号等统称为标识符。除库函数的函数名由系统定义外,其余都由用户自定义。C 规定,标识符只能是字母(A~Z,a~z)、数字(0~9)、下划线(_)组成的字符串,并且其第一个字符必须是字母或下划线。 以下标识符是合法的:        a, x,  x3, BOOK_1, sum5 以下标识符是非法的:     3a …

    2020年4月5日
    4.9K0
  • python 中time.gmtime()与localtime()的区别

    gmtime转换的时间是UTL时间,与北京时间相差了8个小时 import time print(time.time()) print(time.strftime(“%Y-%m-%d 星期%w %H:%M:%S”,time.localtime())) print(time.strftime(“%Y-%m-%d 星期%w %H:%M:%S”,time.gmti…

    2022年7月15日
    3.0K0

发表回复

登录后才能评论