一、问题产生原因
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());
});
});
二、解决方案
搜了一堆解决方案,针对浏览器各种搞,然而没用。最后从黄者之风博客上找到了有用的解决方案。
<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;
}
});
});