效果预览:
每一行都有注释,宛如妈妈的唠叨,再也不怕看不懂代码了~~~~
想知道URL.createObjectURL()详细内容点这里
js部分:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片上传功能</title>
</head>
<body>
<!-- accept 为设置当前选取文件类型 若不限制图片文件类型可设置为 accept="image/*"-->
<input type="file" id="fileUpload" accept="image/png,image/jpeg,image/jpg" />
<div id="list-view"></div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>
//建立空数组,用于存放获取的文件路径及相关的判断操作
var arr = [];
//当input的值发生变化就触发事件(利用值的变化判断是否选取了文件)
$('#fileUpload').change(function() {
//限制选取文件的最大数量为4
if (arr.length > 3) {
//将input设置为禁用状态
$('#fileUpload').attr('disabled','disabled');
}
//获取选取的文件路径并解析为可渲染的路径
var imgSrc = URL.createObjectURL(this.files[0]);
//将路径添加至img标签中
var template = '<img src="' + imgSrc + '" style="width: 50px">';
//将img标签插入元素中,在页面显示
$('#list-view').append(template);
//将路径插入数组中,用于已选取文件数量判断
arr.push(imgSrc);
});
//为防止ajax动态添加数据无法绑定事件,故用body添加on事件给子元素添加,避开这个问题
$('body').on('click','img',function(){
//获取当前点击的元素下标(其下标与数组下标是一致的)
var i = $(this).index();
//判断如果当前选取文件数量未超过4张而设置input为非禁用状态
if (arr.length < 5) {
//清除input禁用状态
$('#fileUpload').removeAttr("disabled");
}
//根据点击删除元素的下标,删除数组下标(img标签只是负责渲染,但数据源是arr数组,判断都是依靠他,所以必须删除数组里面的数据)
arr.splice(i,i);
//当前点击元素下标为0(即第一个时,清空数组)
if (i == 0) {
arr.splice(0,1);
}
//删除当前点击元素
$(this).remove();
});
</script>
</body>
</html>