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

来源：互联网发布：java fx listview 编辑：程序博客网时间：2024/06/06 07:24

一、问题产生原因

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

<!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>

<script>$(function(){$("#inFile").on("change",function () {$("img").attr("src",$(this).val());});});

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

二、解决方案

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

<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。

0 0