使用js显示本地图片

最新推荐文章于 2024-06-08 09:44:34 发布

yinbucheng

最新推荐文章于 2024-06-08 09:44:34 发布

阅读量3.7k

点赞数

分类专栏：项目经验总结前端技术

项目经验总结同时被 2 个专栏收录

60 篇文章 0 订阅

订阅专栏

前端技术

4 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta charset="UTF-8">
<title>如梦技术IT-图片上传预览</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp">
</head>
<body>
<input type="file" id="user-pic">
<img id="viewImg">
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js

"></script>
<script type="text/javascript">
//图片预览，兼容各个浏览器
function previewImage(file) {
var porImg = $(file),
viewImg = $('#viewImg');
var image = porImg.val();
if (!/^\S*\.(?:png|jpe?g|bmp|gif)$/i.test(image)) {
layer.msg('请选择图片~', {shift: 6});
porImg.val("");
return false;
}
if (file["files"] && file["files"][0]) {
var reader = new FileReader();
reader.onload = function(evt){
viewImg.attr({src : evt.target.result});
}
reader.readAsDataURL(file.files[0]);
} else {
var ieImageDom = document.createElement("div");
var proIeImageDom = document.createElement("div");
$(ieImageDom).css({
float: 'left',
position: 'relative',
overflow: 'hidden',
width: '100px',
height: '100px'
}).attr({"id":"view"});
$(proIeImageDom).attr({"id": porImg.attr("id")});
porImg.parent().prepend(proIeImageDom);
porImg.remove();
file.select();
path = document.selection.createRange().text;
$(ieImageDom).css({"filter": "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")"});
}
}

//图片上传预览
$('#user-pic').change(function(e){
previewImage(this);
});
</script>
</body>
</html>