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%的人还看了以下文章

  • 单元测试经验总结,单元测试快速入门教程六

    测试人员在进行测试的工作过程中,应该注意积累测试工作经验,这样可以缩短单元测试的时间,提高测试效果和效率。 如: 1.在做单元测试的过程中,要灵活选用测试用例设计技术,可以首先使用黑盒测试用例设计技术,然后根据相应的覆盖率统计再补充白盒测试用例。这样既减少了测试工作的重复,又保证了单元测试的完整性。 2.设计驱动程序时,要保证测试逻辑的正确性。否则,即使代码…

    2018年4月18日
    2.8K0
  • PHP获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法

    php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法,主要使用到了 php 的时间函数 mktime。

    2023年3月8日
    8160
  • NumPy快速入门(一)

    NumPy(Numerical Python) 是 Python 语言的一个扩展程序库,支持大量的维度数组与矩阵运算,此外也针对数组运算提供大量的数学函数库。 NumPy作为高性能科学计算和数据分析的基础包,是其他重要数据分析工具的基础。 一、认识NumPy数组对象 import numpy as np #导入numpy数据包 data=np.arange(…

    2022年1月24日
    6620
  • 网络编程 ASP.NET(C#)学习笔记二:数据类型-值类型

    C#中数据类型主要分为两大类:值类型和引用类型。本节课主要讲解值类型的分类和结构类型、枚举类型的定义和使用。 值类型: C#中值类型包括3种:简单类型、结构类型和枚举类型。 简单类型包括整数类型、字符类型、实数类型和布尔类型等,在此不做介绍,随便找本书看下即可。 结构类型:用于定义复杂的数据类型。如图书信息(包括书名,作者,出版社,价格等等),坐标点的信息(…

    2018年1月30日
    1.4K0
  • python属于编译型还是解释型的语言?python是哪一种类型的编译语言

    Python先把代码编译成字节码,再对字节码解释执行。 java   编译型(请求次数多)+解释型(请求次数少) 解释性语言定义: 程序不需要编译,在运行程序的时候才翻译,每个语句都是执行的时候才翻译。这样解释性语言每执行一次就需要逐行翻译一次,效率比较低。 现代解释性语言通常把源程序编译成中间代码,然后用解释器把中间代码一条条翻译成目标机器代码,一条条执行…

    2023年2月26日
    1.2K0
  • 2个pycharm使用技巧:更改文件、文件夹名称,更换pip为清华源

    pycharm怎么重命名文件、文件夹名称 1.右键单击文件名称,在弹出的界面选择refacto下的rename选项 2.在弹出的界面输入新的名称即可 pycharm更换pip清华源 永久使用 直接在Pycharm打开终端Terminal,选择Command Prompt,将下列语句复制进去,回车执行 pip config set global.index-u…

    2023年10月3日
    4980

发表回复

登录后才能评论