实时显示从file输入框中打开的图片C:\fakepath问题

最新推荐文章于 2021-08-05 15:07:00 发布

qq_33390613

最新推荐文章于 2021-08-05 15:07:00 发布

阅读量915

点赞数

文章标签： filepath

一、问题产生原因

1、今天维护公司项目，需要修改一个上传图片显示的问题，就是实时显示一个从file input上传的图片问题，以下是demo：

[html]view plain copy
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>  
    <script type="text/javascript" src="jquery-1.11.1.js"></script>  
</head>  
<body>  
    <input id="inFile" type="file">  
    <img src="" alt="1111">  
</body>  
</html>  

[javascript]view plain copy
<script>  
$(function(){  
    $("#inFile").on("change",function () {  
        $("img").attr("src",$(this).val());  
    });  
});  

这就是控制台的显示，预想的图片并没有显示出来，路径也变成了 C:\fakepath\1.png

二、解决方案

搜了一堆解决方案，针对浏览器各种搞，然而没用。最后从黄者之风博客上找到了有用的解决方案。

[javascript]view plain copy
<script>  
$(function(){  
    $("#inFile").on("change",function () {  
        var $file = $(this);  
        var fileObj = $file[0];  
  
        var windowURL = window.URL || window.webkitURL;  
        var dataURL;  
        var $img = $("img");  
  
        if (fileObj && fileObj.files && fileObj.files[0]) {  
            dataURL = windowURL.createObjectURL(fileObj.files[0]);  
            $img.attr('src', dataURL);  
        } else {  
            dataURL = $file.val();  
            var imgObj = document.getElementById("preview");  
            imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";  
            imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;  
  
        }  
    });  
});  

亲测在IE、Chrome、Firefox、edge均可以正常展示图片，以下是Chrome展示，虽然显示的地址依然不是理想的，但是图片能显示就OK。

qq_33390613

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实时显示从file输入框中打开的图片C:\fakepath问题

一、问题产生原因1、今天维护公司项目，需要修改一个上传图片显示的问题，就是实时显示一个从file input上传的图片问题，以下是demo：[html] view plain copy&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title
复制链接

扫一扫