<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.shade {
position: absolute;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.55);
}
.shade div {
width: 300px;
height: 200px;
line-height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -150px;
background: white;
border-radius: 5px;
text-align: center;
}
.a-upload {
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #888;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 4px;
overflow: hidden;
display: inline-block;
*display: inline;
*zoom: 1
}
.a-upload input {
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer
}
.a-upload:hover {
color: #444;
background: #eee;
border-color: #ccc;
text-decoration: none
}
.img_div{min-height: 100px; min-width: 100px;}
.isImg{width: 120px; height: 120px; position: relative; float: left; margin-left: 10px;}
.removeBtn{position: absolute; top: 0; right: 0; z-index: 11; border: 0px; border-radius: 50px; background: red; width: 22px; height: 22px; color: white;}
.shadeImg{position: absolute;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 15;
text-align: center;
background: rgba(0, 0, 0, 0.55);}
.showImg{width: 400px; height: 500px; margin-top: 140px;}
</style>
<script type="text/javascript">
$(function() {
var objUrl;
var img_html;
$("#myFile").change(function() {
var img_div = $(".img_div");
var filepath = $("input[name='myFile']").val();
for(var i = 0; i < this.files.length; i++) {
objUrl = getObjectURL(this.files[i]);
var extStart = filepath.lastIndexOf(".");
var ext = filepath.substring(extStart, filepath.length).toUpperCase();
/*
作者：z@qq.com
时间：2016-12-10
描述：鉴定每个图片上传尾椎限制
* */
if(ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
$(".shade").fadeIn(500);
$(".text_span").text("图片限于bmp,png,gif,jpeg,jpg格式");
this.value = "";
$(".img_div").html("");
return false;
} else {
/*
若规则全部通过则在此提交url到后台数据库
* */
img_html = "<div class='isImg'><img src='" + objUrl + "' onclick='javascript:lookBigImg(this)' style='height: 100%; width: 100%;' /><button class='removeBtn' onclick='javascript:removeImg(this)'>x</button></div>";
img_div.append(img_html);
}
}
/*
作者：z@qq.com
时间：2016-12-10
描述：鉴定每个图片大小总和
* */
var file_size = 0;
var all_size = 0;
for(j = 0; j < this.files.length; j++) {
file_size = this.files[j].size;
all_size = all_size + this.files[j].size;
var size = all_size / 1024;
if(size > 500) {
$(".shade").fadeIn(500);
$(".text_span").text("上传的图片大小不能超过100k！");
this.value = "";
$(".img_div").html("");
return false;
}
}
/*
作者：z@qq.com
时间：2016-12-10
描述：鉴定每个图片宽高 以后会做优化 多个图片的宽高 暂时隐藏掉 想看效果可以取消注释就行
* */
// var img = new Image();
// img.src = objUrl;
// img.onload = function() {
// if (img.width > 100 && img.height > 100) {
// alert("图片宽高不能大于一百");
// $("#myFile").val("");
// $(".img_div").html("");
// return false;
// }
// }
return true;
});
/*
作者：z@qq.com
时间：2016-12-10
描述：鉴定每个浏览器上传图片url 目前没有合并到Ie
* */
function getObjectURL(file) {
var url = null;
if(window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if(window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if(window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
//console.log(url);
return url;
}
});
/*
作者：z@qq.com
时间：2016-12-10
描述：上传图片附带删除 再次地方可以加上一个ajax进行提交到后台进行删除
* */
function removeImg(r){
$(r).parent().remove();
}
/*
作者：z@qq.com
时间：2016-12-10
描述：上传图片附带放大查看处理
* */
function lookBigImg(b){
$(".shadeImg").fadeIn(500);
$(".showImg").attr("src",$(b).attr("src"))
}
/*
作者：z@qq.com
时间：2016-12-10
描述：关闭弹出层
* */
function closeShade(){
$(".shade").fadeOut(500);
}
/*
作者：z@qq.com
时间：2016-12-10
描述：关闭弹出层
* */
function closeShadeImg(){
$(".shadeImg").fadeOut(500);
}
</script>
<title>jQuery多张图片上传预览代码 - 网页模板</title>
</head>
<body>
<center>
<div class="img_div">
</div>
<a href="javascript:;" class="a-upload">
<input type="file" name="myFile" id="myFile" multiple="multiple" />点击这里上传文件
</a>
<div class="shade" onclick="javascript:closeShade()">
<div class="">
<span class="text_span">
</span>
</div>
</div>
<div class="shadeImg" onclick="javascript:closeShadeImg()">
<div class="">
<img class="showImg" src="">
</div>
</div>
</center>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
