功能介绍
如题，我们需要做的就是用jquery实现图片上传前预览效果，并兼容所有浏览器（ie8+及其他浏览器），可以控制上传图片的数量，对图片进行删除操作，ie10+浏览器及其他浏览器能够控制图片大小，至于ie10以下如何控制图片大小的问题，请大佬提点。
在上周，我以为我完成了这个功能，并兼容各浏览器，然鹅在昨晚，我将这个功能单拿出来整理，并在各浏览器版本下进行测试，发现了bug！在ie10浏览器下，图片预览为空白！
并且删除按钮无效。
先介绍一下图片回显使用到的方法：
● 对于 Chrome、Firefox、IE10+ 使用 file对象的url（window.URL.createObjectURL）来实现。
● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
判断IE版本
排除问题后发现是 document.all 的问题！它可以判断浏览器是否是IE ，经测试后，发现它可以判断IE10及以下的浏览器为IE，重点：把IE10算进去了。所以IE10 被派去用滤镜实现回显了（？？？）
if(document.all){
alert("is IE!");
}
所以解决办法是添加一个能够判断IE版本的方法（以IE10为分界），在删除和回显时都需要判断，以便使用不同的方法。
// 判断ie浏览器版本 以ie10为分界，ie10以下返回true，否则返回false
function IEVersion() {
//取得浏览器的userAgent字符串
var userAgent = navigator.userAgent;
//判断是否IE浏览器
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion < 10) { //IE10以下
return true;
}
} else {
return false;
}
}
实现该功能
html
<div class="content">
<input id="file" type="file" value="上传文件" class="input file" accept=".png, .jpeg, .gif, .jpg" multiple/>
<a href="javascript:;" class="input select-tips" style="color:#999;">请选择本地文件...</a>
<p class="gray">请选择jpg/jpeg/png/gif格式的图片，最多可以传五张图片，图片大小不超过 2 M。</p>
<div class="pic" style="display:none;"> </div>
</div>
css
a{text-decoration: none;}.content{width: 400px;margin: 100px auto;}
.pic{margin: 80px 0 0 -9px;width: 400px;position: absolute;}
.preview{position: relative;display: inline-block;vertical-align: top;margin-left: 10px;width: 64px;height: 64px;background: #E1E6ED;text-align: center;}
.preview img{position: relative;z-index: 1;width: 100%;height: 100%;}
.preview a.del-img,.ie-img a.del-img{position: relative;margin-top: 75px;cursor: pointer;color: #7f7c77;font-size: 12px;}
.ie-img{position: relative;display: inline-block;vertical-align: top;margin-left: 10px;width: 64px;height: 64px;text-align: center;}
.ie-img a.del-img{display: block;margin-top: 72px;}
.ie-img a.del-img:hover,.preview a.del-img:hover{text-decoration: underline;}
.file{height: 26px;opacity: 0;opacity: 1\0;position: absolute;z-index: 10;cursor: pointer;}
.select-tips{display: inline-block;width: 200px;height: 26px;padding: 4px 5px;line-height: 26px;border: 1px solid rgb(217, 217, 217);border-radius: 2px;background-color: rgb(255, 255, 255);position: absolute;z-index: 1;color: #9c9c9c;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size: 14px;}
.gray{color: #a9a9a9;width: 302px;margin: 40px 0 10px;line-height: 17px;font-size: 12px;position: absolute;}
.input{width: 255px;padding: 4px 15px;line-height: 26px;color: #3d3d3d;border: 1px solid #ccc;border-radius: 2px;background-color: #fff;}
js
// 判断ie浏览器版本 以ie10为分界，ie10以下返回true，否则返回false
function IEVersion() {
//取得浏览器的userAgent字符串
var userAgent = navigator.userAgent;
//判断是否IE浏览器
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
if (isIE) {
var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp["$1"]);
if (fIEVersion < 10) {
return true;
}
} else {
return false;
}
}
//上传图片预览
var imgsNum = {"0":0,"1":0,"2":0,"3":0,"4":0,}
var filesArr = []
function previewImgs(files) {
$(".pic .preview").remove();
if(files.length == 0){
$(".pic").hide();
}else{
$(".pic").show();
for (var i = 0; i < files.length; i++) {
var filesSrc = window.URL.createObjectURL(files[i]);
$(".pic").append("<div class='preview' id='img"+(i)+"'><img src='"+filesSrc+"'><a class='del-img' data-imgnum='"+(i)+"'>删除</a></div>")
}
}
}
// 控制图片大小 ie10以下不支持
var checkSize = false;
function checkFileSize(files) {
for (var i = 0; i < files.length; i++) {
var fileSize = (files[i].size/(1024*1024)).toFixed(2);
if (fileSize > 2) {
alert("图片大小不能超过2M")
checkSize = true;
}
}
}
//上传图片
$('#file').on("change",function() {
// 判断是否为ie11以下浏览器
if (IEVersion()){//ie10以下ie浏览器
if (imgsNum[0] == 1&&imgsNum[1] == 1&&imgsNum[2] == 1&&imgsNum[3] == 1&&imgsNum[4] == 1) {
alert("最多上传5张图片")
return;
}
for (var key in imgsNum) {
if (imgsNum[key] == 0) {
$(".pic").show();
this.select();
this.blur();
var imgSrc = document.selection.createRange().text;
$(".pic").append('<div class="ie-img" id="'+key+'img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=\'' + imgSrc + '\'"><a class="del-img" data-imgnum="'+key+'">删除</a></div>')
imgsNum[key] = 1;
return;
}
}
}else{//是ie10,ie11及其他浏览器
checkFileSize(this.files);
if (checkSize) {
checkSize = false;
return;
}else{
if(this.files.length > 0){
var fileLen = this.files.length+filesArr.length
if (fileLen > 5) {
alert("最多上传5张图片")
}else{
for (var i = 0; i < this.files.length; i++) {
filesArr.push(this.files[i])
}
previewImgs(filesArr)
}
}
}
}
})
//点击图片下的删除按钮
$(document).on("click",".del-img",function () {
var imgnum = $(this).attr("data-imgnum")
if (IEVersion()){
imgsNum[imgnum] = 0;
$("#"+imgnum+"img").remove();
}else{
filesArr.splice(imgnum , 1)
previewImgs(filesArr)
}
})
效果如下：
欢迎批评指正及优化！
