input file实现多选，限制文件上传类型，图片上传前预览功能
限制上传类型 & 多选：
① 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: ;
padding: ;
} .tip {
width: %;
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 #;
box-sizing: border-box;
font-size: 100px;
line-height: 100px;
font-weight: ;
color: #;
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 = ;
$(".add").click(function(e) {
if (!$("#upload")[]) {
$(".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[]);
$(el).removeAttr('id');
}
// 删除图片并删除对应隐藏的input
function del(cls){
$(".num" + cls).remove();
}
</script>
注意：如果不选图片，点取消的时候，上例中会有一个多余的input，表单提交的时候，记得把没有值的 input 删除掉。 input file实现多选，限制文件上传类型，图片上传前预览功能的更多相关文章
- Django文件上传三种方式以及简单预览功能
主要内容: 一.文件长传的三种方式 二.简单预览功能实现 一.form表单上传 1.页面代码 <!DOCTYPE html> <html lang="en"> ...
- 使用input选择本地图片，并且实现预览功能
1.使用input标签选择本地图片文件 用一个盒子来存放预览的图片 2.JS实现预览 首先添加一个input change事件,再用到 URL.createObjectURL() 方法 用来创建 UR ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 一、简单的图片上传并预览功能input[file]
一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...
- jsp+springmvc实现文件上传、图片上传和及时预览图片
1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 【转】html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 文件批量上传-统一附件管理器-在线预览文件(有互联网和没有两种)--SNF快速开发平台3.0
实际上在SNF里使用附件管理是非常简单的事情,一句代码就可以搞定.但我也要在这里记录一下统一附件管理器能满足的需求. 通用的附件管理,不要重复开发,调用尽量简洁. 批量文件上传,并对每个文件大小限制, ...
- hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...
随机推荐
- Dubbo2.7源码分析-SPI的应用
SPI简介 SPI是Service Provider Interface的缩写,即服务提供接口(翻译出来好绕口,还是不翻译的好),实质上是接口,作用是对外提供服务. SPI是Java的一种插件机制,可 ...
- bzoj 3600: 没有人的算术
Description Solution 我们可以给每一个数钦定一个权值 , 这样就可以 \(O(1)\) 比较大小了. 考虑怎么确定权值: 用平衡树来维护 , 我们假设根节点管辖 \([1,2^{6 ...
- awk统计文件中某关键词出现次数
1.统计文件test.txt中第2列不同值出现的次数 awk '{sum[$2]+=1}END{for(i in sum)print i"\t"sum[i]}' test.txt ...
- c#基础学习(0708)之静态类
再静态类中,所包含的所有成员都是“静态成员” 不是所有的静态成员都必须卸载静态类中 静态成员时属于“类”的,不是属于具体“对象”的,所以访问静态成员的时候不能通过对象来访问(对象.属性名),只能通过“ ...
- ASP.NET 关于GridView 表格重复列合并
这几天做一个项目有用到表格显示数据的地方,客户要求重复的数据列需要合并,就总结了一下GridView 和 Repeater 关于重复数据合并的方法. 效果图如下 : GridView : 前台代码 : ...
- 如果你的shiro没学明白，那么应该看看这篇文章，将shiro整合进springboot
最近在做项目的时候需要用到shiro做认证和授权来管理资源 在网上看了很多文章,发现大多数都是把官方文档的简介摘抄一段,然后就开始贴代码,告诉你怎么怎么做,怎么怎么做 相信很多小伙伴即使是跟着那些示例 ...
- Code Signal_练习题_reverseParentheses
You have a string s that consists of English letters, punctuation marks, whitespace characters, and ...
- Angular7 Drag and Drop
完整代码在最后,下面讲解以此代码为例 1.环境配置 1.1 安装@angular/material.@angular/cdk cnpm install --save @angular/material ...
- AngularJs 第一个自定义指令编写
公司在做一个OA系统, 包括移动端(从微信企业号进入OA系统),电脑端. 电脑端还是用的传统的easyui做界面,asp.net mvc作为服务端.这个技术已经很成熟了配合权限框架很快就能开发出来.但 ...
- 【Android】RxJava的使用（四）线程控制 —— Scheduler
并没有关系的图 前言 经过前几篇的介绍,对RxJava对模式有了一定的理解:由Observable发起事件,经过中间的处理后由Observer消费.(对RxJava还不了解的可以出门左拐)之前的代码中 ...