获取input添加图片的路径以及fakepath的解决方法

错误实例（fakepath路径）

<html>
<input type="file" id="recipient-name">
<script>var file = $("#recipient-name");         //获取id值为...的file类型的表单$(file).change(function() {            //表单的内容完成后实现的方法var fileToncet = $(this).val();    //获取表单的内容console.log(fileToncet);           //输出表单的内容   <img src="C:\fakepath\3.3.jpg"/>var creatImg = '<img src="' + fileToncet + '"/>'; //生成一个图片标签，路径和为表单的内容（即路径）var imgDiv = $('.div-img').append(creatImg);  //将这个图片标签插入到指定位置,照片不显示console.log(creatImg);//输出图片的路径  <img src="C:\fakepath\3.3.jpg"/>浏览器为了安全问题，会自动更改图片的路径，所以此时图片的路径不是原路径，导致图片显示不出来

解决方法

<html>
<input type="file" id="recipient-name">
<script>$("#recipient-name").change(function(e) { //监听input内容改变var exSrc = e.target;exGetImg(exSrc);
//调用获取图片信息的方法})var exGetImg = function(extag) {var file = extag.files[0];                               //选中文件的第一个文件（当成固定的格式）var readers = new FileReader();                         //新建文件阅读对象，来转意路径readers.readAsDataURL(file);                           //将读取的文件路径，将路径转换为url类型    readers.onload = function() {                         //转换之后调用onload（）方法var imgsSrc = this.result;                      //图片地址读出来之后result结果为 DataURL  //this.result  为图片转化的url路径console.log(imgsSrc)                            //显示出来图片的url路径，可以直接赋给img的src属性var creatImg = '<img src="' + imgsSrc + '"/>'; //生成一个图片标签，路径和为表单的内容（即路径）var imgDiv = $('.div-img').append(creatImg);  //将这个图片标签插入到指定位置,照片显示。}}

获取input添加图片的路径以及fakepath的解决方法相关推荐

删除目录下的特定命名的图片，获取特定名称图片的路径
1.头文件 2.函数体--获取指定名称图片的路径 3.函数体-删除指定路径下指定名称的图片转载于:https://www.cnblogs.com/1234abcdttttjy001/p/106553 ...
android 部分手机Camera 拍照图片被旋转90度的解决方法
部分手机拍照完后图片旋转角度90度,目前解决方法普遍都是通过图片路径,获取图片信息判断角度,然后转换角度.如下: /*** 读取图片属性:旋转的角度* @param path 图片绝对路径* @re ...
PowerDesigner16.5反向工程获取Oracle11g数据表结构遇到的问题及解决方法
PowerDesigner16.5反向工程获取Oracle11g数据表结构遇到的问题及解决方法本人只想用PowerDesigner16.5反向工程获取Oracle11g生成ER图,没曾想纠结了两个晚 ...
win7双击计算机出现windows无法访问指定设备,win7系统提示“Windows无法访问指定设备路径或文件”的解决方法...
‍ 为什么在win7系统上点击桌面图标提示"Windows无法访问指定设备路径或文件,您可能没有合适的权限访问",这是为什么?这是因为你的C盘是NTFS格式的,所以这个时候只要给账 ...
html5官网中遇到的问题,html5的input的required使用中遇到的问题及解决方法
form提交时隐藏input发生的错误问题描述在form表单提交的时候,有些input标签被隐藏,表单验证过程中会出现An invalid form control with name=" ...
android camera 图片被旋转,android 部分手机Camera 拍照图片被旋转90度的解决方法
部分手机拍照完后图片旋转角度90度,目前解决方法普遍都是通过图片路径,获取图片信息判断角度,然后转换角度.如下: /** * 读取图片属性:旋转的角度 * @param path 图片绝对路径 * ...
android 相册png黑底,Android png透明图片转jpg时背景变黑的解决方法
在做view保存图片后,压缩格式转为jpg的时候出现了黑色背景,其根本原因在于透明背景时背景的情况下,转换为jpg的时候会变成黑色背景,原因是PNG支持透明图而 JPG格式不支持透明背景. 我们的解决 ...
java png背景变黑,Android png透明图片转jpg时背景变黑的解决方法
Android png透明图片转jpg时背景变黑的解决方法发布时间:2020-09-01 07:36:28 来源:脚本之家阅读:141 作者:康熙微博私访记在做view保存图片后,压缩格式转为j ...
android黑色背景图片,Android png透明图片转jpg时背景变黑的解决方法
在做view保存图片后,压缩格式转为jpg的时候出现了黑色背景,其根本原因在于透明背景时背景的情况下,转换为jpg的时候会变成黑色背景,原因是PNG支持透明图而 JPG格式不支持透明背景. 我们的解决 ...
关于van-card中thumb引入本地图片而无法正常显示的解决方法
关于van-card中thumb引入本地图片而无法正常显示的解决方法前言解决办法总结前言最近在弄一个微信公众号,是H5前端,用到的是vant组件. 当然Vant的官方文档以及例子都有,但是很 ...

获取input添加图片的路径以及fakepath的解决方法

错误实例（fakepath路径）

解决方法

获取input添加图片的路径以及fakepath的解决方法相关推荐

最新文章

热门文章