一、前言
功能:可上多个文件,选择框下面显示已经选择的文件,可删除已选择的文件,图片类型可预览。
遇到问题:选择同一个文件change
事件不会触发
解决:change
事件后,用一个新的input file
替换原来的Input file
二、效果
三、代码
页面
<form>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
</form>
<div class="media">
<div class="media-left">
<!--<a href="#">
<img class="media-object" src="..." alt="...">
</a>-->
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
js
<script>
$(function () {
var files=[]
//change事件要用委托
$(".form-group").on('change','#exampleInputFile',function (e) {
if(!e){
return;
}
var $inputfile = '<input type="file" id="exampleInputFile">';
//替换原来的input file ,避免在删除这个文件后,重复选时不能选
$(this).replaceWith($inputfile)
var file = e.target.files; //获取图片资源
var img ="";
if (files.length <= 0) {
files.push(file);
} else {
var bool = false;
for (var i = 0; i < files.length; i++) {
if (file[0].name === files[i][0].name) {
bool = true;
break;
}
}
if (!bool) {
files.push(file);
}
}
$.each(files, function (index, fileItem) {
if (fileItem[0].type.match('image.*')) {
var reader = new FileReader();
reader.readAsDataURL(fileItem[0]); // 读取文件
// 渲染文件
reader.onload = function (args) {
img += "<li><div ><img height='100' width='100' class='preview' src='" + args.currentTarget.result + "' /><span>" + fileItem[0].name + "</span></div>" +
"<div class='dele'>删除</div></li>";
$(".media-left").html(img);
}
} else {
img += "<li><div ><img height='100' width='100' /><span>" + fileItem[0].name + "</span></div>" +
"<div class='dele'>删除</div></li>";
}
});
console.log(img)
$(".media-left").html(img);
})
//删除文件
$('.media-left').on('click', '.dele', function (e) {
var fileName = $(this).parent().find('span').text();
for (var i = 0; i < files.length; i++) {
if (files[i][0].name === fileName) {
files.splice(i, 1);
e.currentTarget.parentNode.remove();
}
}
});
})
</script>