读取input:file的路径并显示本地图片的方法

最新推荐文章于 2021-12-17 14:49:09 发布

aochan9664

最新推荐文章于 2021-12-17 14:49:09 发布

阅读量380

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangqc/p/input_file.html

版权

<!doctype html>   
<html>   
<head>   
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />   
<title>Image preview example</title>   
<script type="text/javascript">   
var loadImageFile = (function () {   
if (window.FileReader) {   
var oPreviewImg = null, oFReader = new window.FileReader(),   
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;   
  
  
oFReader.onload = function (oFREvent) {   
if (!oPreviewImg) {   
var newPreview = document.getElementById("imagePreview");   
oPreviewImg = new Image();   
oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";   
oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";   
newPreview.appendChild(oPreviewImg);   
}   
oPreviewImg.src = oFREvent.target.result;   
};   
  
  
return function () {   
var aFiles = document.getElementById("imageInput").files;   
if (aFiles.length === 0) { return; }   
if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }   
oFReader.readAsDataURL(aFiles[0]);   
}   
  
  
}   
if (navigator.appName === "Microsoft Internet Explorer") {   
return function () {   
alert(document.getElementById("imageInput").value);   
document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("imageInput").value;   
  
  
}   
}   
})();   
</script>   
<style type="text/css">   
#imagePreview {   
width: 160px;   
height: 120px;   
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);   
}   
</style>   
</head>   
<body>   
<div id="imagePreview">   
</div>   
<form name="uploadForm">   
<p>   
<input id="imageInput" type="file" name="myPhoto" οnchange="loadImageFile();" /><br />   
<input type="submit" value="Send" /></p>   
</form>   
</body>   
</html>

转载于:https://www.cnblogs.com/wangqc/p/input_file.html

aochan9664

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
读取input:file的路径并显示本地图片的方法

<!doctype html> <html> <head> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <title>Image preview example</title> ...
复制链接

扫一扫