您的位置：首页 > 其它

图片本地上传预览

2017-05-17 10:55 239 查看

在IE里面显示的话，你可以用div直接显示图片，不通过img来添加SRC，这样就不会有小图标出现

例子：

<div class="banner_up_pic" id="imgPreDiv"></div>

var file_upl = document.getElementById("file");

file_upl.select();

获取图片路径 var imgpath=document.selection.createRange().text;

注意imgPreDiv 为图片显示的div的ID ！！！ document.getElementById("imgPreDiv").style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""+ imgpath + "\")";//使用滤镜效果

我写了一个兼容版本

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<meta name="description" content="图片本地上传预览">
<meta name="author" content="jiangxiaobo">
<link rel="icon" href="favicon.ico">
<title>图片本地上传预览</title>
<!-- <link rel="stylesheet" type="text/css" href="css/*.css"> -->

<style type="text/css">
.preview {
position: relative;
width:260px;
height:190px;
border:1px solid #000;
overflow:hidden;
}
.preview .imghead {
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-size: 100%;
}
.preview .input-file {
position: absolute;
left: -1000px;
top: -1000px;
}
</style>
</head>
<body>

<div class="preview">
<label class="imghead">
<input class="input-file" type="file" accept="image/*" onchange="previewImage(this)" />
</label>
</div>

<script type="text/javascript" src="./Public/web/js/jquery.1.8.3.min.js"></script>
<script type="text/javascript">
function previewImage(file){
// console.log(file.files);
var imghead = $(file).parent('.imghead');
var preview = imghead.parent('.preview');
var imgheadOffset = imghead.offset();
var rect = {
top : imgheadOffset.top,
left : imgheadOffset.left,
width : imghead.width(),
height : imghead.height()
};
if(file.files && file.files[0]){
// 主流浏览器
var reader = new FileReader();
reader.onload = function(evt){
imghead.css('background-image','url('+evt.target.result+')');
};
reader.readAsDataURL(file.files[0]);
}else{
//兼容IE
file.select();
var src = document.selection.createRange().text;
preview.css('filter','progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'+src+'")');
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航