上传图片并实现本地预览（1）
该版本是带有css样式的实现效果,属于初步整理。
纯js实现效果请看上传图片并实现本地预览（2）。
这两篇文档的区别在于：兼容IE时，本文的滤镜css样式写在css样式中。
效果预览
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>本地上传图片并实现预览</title>
<link rel="stylesheet" type="text/css" href="css/upload.css" />
<!-- <script type="text/javascript" src="js/jquery-2.0.3.min.js"></script> -->
<script type="text/javascript" src="js/jquery1.11.js"></script>
<script type="text/javascript" src="js/upload.js"></script>
</head>
<body>
<div class="upload-wrap">
<div class="upload-box">
<i class="close-btn"></i>
<span class="upload-span">上传图片</span>
<input class="upload-btn" accept="image/*" type="file" name="cus_upload_pic[]" />
<div class="preview-img-box"></div>
</div>
</div>
</body>
</html>
css样式
用css实现上传按钮的美化，这个我就随便写了写，比较丑
.upload-wrap{
overflow: hidden;
}
.upload-box{
position: relative;
width: 106px;
height: 106px;
border:1px solid #e1e1e9;
overflow: hidden;
float: left;
margin: 10px;
}
.upload-span{
display: block;
width: 100%;
height: 100%;
line-height: 100px;
font-size: 20px;
color: #fff;
background: green;
text-align: center;
position: absolute;
left: 0;
top: 0;
z-index: 5;
}
.upload-btn{
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
font-size:90px;
z-index: 10;
opacity: 0;
filter:Alpha(opacity=0);
}
.close-btn{
display: block;
width: 17px;
height: 17px;
position: absolute;
background: url(../img/close.gif);
right: -1px;
top: -1px;
z-index: 100;
cursor: pointer;
}
.preview-img-box{
width: 100px;
height: 100px;
padding: 3px;
position: absolute;
top: 0;
left: 0;
z-index: 15;
background: #fff;
display: none;
}
.preview-img-box img{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
}
该句样式一定要有。如果没有此句，js会报错。
.preview-img-box img{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
}
没有此句css样式，上传图片效果如下图：
报错：
js
IE10以上才支持FileReader();针对IE7~IE9使用滤镜的方式实现图片预览。由于accept属性IE9及以下浏览器不兼容，因此在上传图片时对文件后缀名进行验证。
$(function(){
$(document).on('change','.upload-btn',function(){
var _this = $(this);
var imgbox = _this.siblings('.preview-img-box');
var maxWidth = imgbox.width();
var maxHeight = imgbox.height();
//IE浏览器，使用滤镜
if(navigator.userAgent.indexOf("MSIE")>0){
if(navigator.userAgent.indexOf("MSIE 7.0")>0 || navigator.userAgent.indexOf("MSIE 8.0")>0 || navigator.userAgent.indexOf("MSIE 9.0")>0){
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
_this.select();
var imgsrc = document.selection.createRange().text;
var imgreg = /\.jpg$|\.jpeg$|\.gif$|\.png$/i;
if(imgreg.test(imgsrc)){
imgbox.show();
imgbox.html('<img class="preview-img" id="PreviewImg" src="" />');
var img = document.getElementById("PreviewImg");
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgsrc;
var rect = clacImgZoomParam(maxWidth, maxHeight, img.offsetWidth, img.offsetHeight);
status = ('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
var odiv = "<div style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+imgsrc+"\"'></div>";
imgbox.html(odiv);
document.selection.empty();
var upload_box = '<div class="upload-box"><i class="close-btn"></i>'
+'<span class="upload-span">上传图片</span>'
+'<input class="upload-btn" accept="image/*" type="file" name="cus_upload_pic[]" />'
+'<div class="preview-img-box"></div></div>';
$(upload_box).appendTo($('.upload-wrap'));
}
else{
alert('图片类型必须是.gif,jpeg,jpg,png中的一种！')
}
}
}
else{
var ofile = _this.prop('files')[0] || _this.files[0];
if(ofile){
if(window.FileReader){
var fr = new FileReader();
fr.onloadend = function(e){
var imgbox = _this.siblings('.preview-img-box');
imgbox.show();
console.log(e.target.result);
var oimg = '<img class="preview-img" src="'+ e.target.result +'" />';
$(oimg).appendTo(imgbox);
var Img = imgbox.find('.preview-img');
var rect = clacImgZoomParam(maxWidth, maxHeight, Img.width(), Img.height());
Img.css({
"display":"block",
"width":rect.width,
"height":rect.height,
"margin-top":rect.top,
"margin-left":rect.left
})
}
fr.readAsDataURL(ofile);
}
var upload_box = '<div class="upload-box"><i class="close-btn"></i>'
+'<span class="upload-span">上传图片</span>'
+'<input class="upload-btn" accept="image/*" type="file" name="cus_upload_pic[]" />'
+'<div class="preview-img-box"></div></div>';
$(upload_box).appendTo($('.upload-wrap'));
}
}
})
//删除功能
$(document).on('click','.close-btn',function(){
var oindex = $(this).parents('.upload-box').index();
if(oindex == 0){
$(this).siblings('.preview-img-box').html('');
$(this).siblings('.preview-img-box').hide();
$(this).siblings('.upload-btn').val('');
$(this).siblings('.upload-btn').show();
$(this).siblings('.upload-span').show();
}
else{
$(this).parents('.upload-box').remove();
}
})
})
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = {top:0, left:0, width:width, height:height};
if( width>maxWidth || height>maxHeight )
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if( rateWidth > rateHeight )
{
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
}else
{
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}
param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}
