获取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);  //将这个图片标签插入到指定位置,照片显示。
            }
       }
发布了2 篇原创文章 · 获赞 0 · 访问量 66

猜你喜欢

转载自blog.csdn.net/zhang19903848257/article/details/104015330
今日推荐