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

本文链接：https://blog.csdn.net/gezi2015129/article/details/71125125

一、问题产生原因

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;

	        }
	    });
	});