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

前端技术 2023/09/08 JavaScript
复制代码 代码如下:

<!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\" onchange=\"loadImageFile();\" /><br />
<input type=\"submit\" value=\"Send\" /></p>
</form>
</body>
</html>

但是需要注意的是 在IE8中 由于IE8自作聪明的将真实路径隐藏起来了 用alert打印的结果是C:/fakepath/*.jpg 所以导致该方法无法使用

解决办法是：进入工具 -> Internet选项 -> 安全 -> 自定义级别 -> 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”，选中“启用”即可。

本文地址：https://www.stayed.cn/item/22967

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案