<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>Document</title>
</head>
<style>
#addImg{width: 60px;height: 60px;line-height: 54px;background:#666;text-align: center;font-size: 60px;color: #fff;}
.itemImg{position: relative;width: 60px;height: 60px;float: left;margin-right: 10px;}
.itemImg .each-pic{width: 100%;height: 100%;}
.itemImg img{width: 100%;height: 100%;display: block;}
.itemImg .delete{position: absolute;top: -5px;right: -5px;width: 20px;height: 20px;display: block;background: #999;color: #fff;font-size: 12px;line-height: 18px;text-align: center;border-radius: 50%;}
</style>
<body>
<section class="photo">
<h3 class="head">添加图片</h3>
<div class="itemImg">
<div class="each-pic each-base" id="addImg" onclick="chooseFile(this);">+</div>
<input type="file" multiple="multiple" class="chooseImg" style="display:none;"
onchange="loadImage(this)" name="images[]">
</div>
</section>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
/**/
var i = 0; //全局参数
Init();
function Init() { //初始化
removePIC();
}
//删除照片
function removePIC() {
$(‘.delete‘).click(function () {
$(this).parent().parent().remove();
});
}
function chooseFile(obj) {
var str = ‘‘; //生成的html字符串
str = ‘<div class="itemImg img_‘ + i + ‘">‘
+ ‘<div class="each-pic">‘
+ ‘<img class="pic pic_‘ + i + ‘" width="100%" height="100%">‘ //生成图片的img
+ ‘<span class="delete">X</span>‘ //删除按钮
+ ‘<input type="file" class="chooseImg_‘ + i + ‘" style="display:none;" onchange="loadImage(this)" name="images[]">‘ //输出图片的file
+ ‘</div>‘
+ ‘</div>‘;
$(obj).parent().before(str);
removePIC();
$(‘.img_‘ + i).hide();
$(‘.chooseImg_‘ + i).click();
}
function loadImage(that) { //显示图片函数
var file = that.files[0]; //获取文件
var imageType = /image.*/; //正则匹配选择的文件是否是image文件
if (file.type.match(imageType)) {
var reader = new FileReader();
//FileReader是用来把文件读入内存，并且读取文件中的数据，
//到目前为止，只有FF3.6+和Chrome6.0+实现了FileReader接口。
//FileReader接口包含了一套完整的事件模型，用于捕获读取文件时的状态。
/* FileReader接口的事件
事件 描述
onabort 中断
onerror 出错
onloadstart 开始
onprogress 正在读取
onload 成功读取
onloadend 读取完成，无论成功失败
*/
reader.onload = function () { //文件加载完成函数
var img = new Image();
img.src = reader.result;
$(img).width(100);
$(img).height(100);
$(‘.img_‘ + i).show();
$(that).siblings(‘.pic_‘ + i).attr("src", reader.result);
i++;
removePIC();
};
/*
FileReader接口的方法
方法名 参数 描述
readAsBinaryString file 将文件读取为二进制编码
readAsText file,[encoding] 将文件读取为文本
readAsDataURL file 将文件读取为DataURL
abort (none) 终端读取操作
*/
reader.readAsDataURL(file);
}
}
</script>
</body>
</html>
时间： 2024-11-05 12:56:33