input file实现多选，限制文件上传类型，图片上传前预览功能
程序员文章站
2022-06-24 10:19:36
上传文件多选，常用文件上传类型，图片上传前预览，上传进度。 ......
限制上传类型 & 多选：
① accept 属性只能与 <input type="file" /> 配合使用。它规定能够通过文件上传进行提交的文件类型。 ② multiple 属性规定输入字段可选择多个值。
示例：
<!--
image/* 所有图片
image/png png图片
image/jpg jpg图片
image/gif gir动图
application/msword Word文档（.doc）
application/vnd.openxmlformats-officedocument.wordprocessingml.document Word文档（.docx）
application/vnd.ms-excel Excel文档（.xls）
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet Excel文档（.xlsx）
application/vnd.ms-powerpoint PPT文档（.ppt）
application/vnd.openxmlformats-officedocument.presentationml.presentation PPT文档（.pptx）
application/zip 压缩文件
text/plain 文本文件
text/html HTML文件
text/css css文件
application/pdf pdf文件
audio/* 音频文件
video/* 视频文件
-->
<input id="files"
type="file"
accept="image/*,
application/msword,
application/vnd.openxmlformats-officedocument.wordprocessingml.document,
application/vnd.ms-excel,
application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
application/vnd.ms-powerpoint,
application/vnd.openxmlformats-officedocument.presentationml.presentation, application/zip,
text/plain,
text/html,
text/css,
application/pdf,
audio/*,
video/*"
multiple />
图片上传前预览：
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> -->
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
}
.tip {
width: 100%;
text-align: center;
}
.main {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
border: 2px dotted red;
padding: 20px;
}
.add {
width: 100px;
height: 100px;
border: 2px solid #333;
box-sizing: border-box;
font-size: 100px;
line-height: 100px;
font-weight: 100;
color: #333;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.form {
display: none;
}
</style>
</head>
<body>
<div class="tip"></div>
<div class="main">
<div class="add">＋</div>
<form class="form"></form>
</div>
</body>
</html>
<script type="text/javascript">
//判断浏览器是否支持FileReader接口
if (typeof FileReader == 'undefined') {
$(".tip").html("<h1>当前浏览器不支持FileReader接口</h1>");
}
var index = 0;
$(".add").click(function(e) {
if (!$("#upload")[0]) {
$(".form").append("<input id='upload' class='num" + (++index) + "' onchange='showImg(this)' type='file' accept='image/*' />");
}
$("#upload").click();
});
// 展示图片
function showImg(el) {
var reader = new FileReader();
//读取文件过程方法
reader.onloadstart = function(e) {
console.log("开始读取....");
};
reader.onprogress = function(e) {
console.log("正在读取中....");
};
reader.onabort = function(e) {
console.log("中断读取....");
};
reader.onerror = function(e) {
console.log("读取异常....");
};
reader.onload = function(e) {
console.log("成功读取....");
// console.log(e);
var img = "<img class='img num" + index + "' width='100px' height='100px' onclick='del(" + index + ")' src='" + e.target.result + "' alt=''>";
$(img).insertBefore('.add');
};
reader.readAsDataURL(el.files[0]);
$(el).removeAttr('id');
}
// 删除图片并删除对应隐藏的input
function del(cls){
$(".num" + cls).remove();
}
</script>
注意：如果不选图片，点取消的时候，上例中会有一个多余的input，表单提交的时候，记得把没有值的 input 删除掉。