1、input标签没有设置multiple属性,文件资源管理器默认一次选取

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="木人子韦一日尘">
<meta name="Description" content="">
<title>multiple</title>
</head>
<body>
<div>
<!--属性accept让文件资源管理器只显示出符合条件的文件-->
<input id="file" type="file" accept="image/jpeg,image/png">
</div>
<div id="pic_vessel"> </div>
<script>
//如果input的value值发生了改变触发onchange的事件
file.addEventListener("change",function(){
//获取files对象
var fObject=this.files;
for(var i=0;i<fObject.length;i++){
var imgI=document.createElement("img");
imgI.style="width:100px;height:100px;margin:10px;";
//将files里的路径转化URL
var url=window.URL.createObjectURL(fObject[i]);
//设置属性src
imgI.setAttribute("src",url);
//添加id为pic_vessel的元素
pic_vessel.appendChild(imgI);
}
});
</script>
</body>
</html>

2、可以设置multiple为空,文件资源管理器就很奇怪的允许了多次选取的行为,而不允许一次选取的行为。值看着像正则表达式,其实就是正则表达式,控制着选取文件格式名的范围。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="木人子韦一日尘">
<meta name="Description" content="">
<title>multiple</title>
</head>
<body>
<div>
<!--属性accept让文件资源管理器只显示出符合条件的文件-->
<input id="file" type="file" accept="image/jpeg,image/png" multiple="image/*">
</div>
<div id="pic_vessel"> </div>
<script>
//如果input的value值发生了改变触发onchange的事件
file.addEventListener("change",function(){
//获取files对象
var fObject=this.files;
for(var i=0;i<fObject.length;i++){
var imgI=document.createElement("img");
imgI.style="width:100px;height:100px;margin:10px;";
//将files里的路径转化URL
var url=window.URL.createObjectURL(fObject[i]);
//设置属性src
imgI.setAttribute("src",url);
//添加id为pic_vessel的元素
pic_vessel.appendChild(imgI);
}
});
</script>
</body>
</html>

  

input属性type为file打开文件资源管理器时,如何限制多次选取或只能一次选取的行为的更多相关文章

  1. C#打开文件资源管理器

    需求: 需要打开windows的文件资源管理器进行浏览文件. 方法: 利用命令提示符(cmd)中输入explorer.exe命令即可打开文件资源管理器 代码实现: 1.引用 using System. ...

  2. Eclipse插件(导出UML图,打开文件资源管理器插件,静态代码分析工具PMD,在eclipse上安装插件)

    目录 能够导出UML图的Eclipse插件 打开文件资源管理器插件 Java静态代码分析工具PMD 如何在eclipse上安装插件 JProfiler性能分析工具 从更新站点安装EclEmma 能够导 ...

  3. 修改win10打开文件资源管理器

  4. sharepoint 2013 文档库 资源管理器打开报错 在文件资源管理器中打开此位置时遇到问题,将此网站添加到受信任站点列表,然后重试。

    我们在使用sharepoint 2013的文档库或者资源库的时候,经常会需要用到使用“资源管理器”来管理文档,但是有时候,点击“使用资源管理器打开”,会提示如下错误: 在文件资源管理器中打开此位置时遇 ...

  5. 设置Win10文件资源管理器默认打开“这台电脑”

    当Windows系统进入Win7之后,任务栏默认的文件资源管理器图标功能是“库”:Win8/Win8.1的这一按钮打开的是“这台电脑”.进入Win10之后,目前这一功能默认变为“快速访问”(曾经被称为 ...

  6. 20160223 - Windows 10 的文件资源管理器下出现重复文件夹的解决办法

    现象: 安装 OneDrive 从 Windows 7.8.8.1 升级来的 Windows 10 的电脑,可能会出现文件资源管理器左侧面板中出现重复的文件夹. 通常有:视频.图片.文档.下载.音频. ...

  7. The Quad - Directory Explorer(一款四窗口的文件资源管理器)

    官网:http://www.q-dir.com/ 参考这位兄弟的介绍:https://www.cnblogs.com/clso/p/4694486.html 一款四窗口的文件资源管理器.

  8. sqlserver打开对象资源管理器管理的帮助文档的快捷键

    sqlserver打开对象资源管理器管理的帮助文档的快捷键:Fn+F1

  9. 系统更新后vs2012无法打开方案资源管理器

    系统更新后vs2012无法打开方案资源管理器 vs调试报错: 未找到与约束 ContractName Microsoft.VisualStudio.Language.Intellisense.IGly ...

随机推荐

  1. SNMP高速扫描器braa

    SNMP高速扫描器braa   SNMP(Simple Network Monitoring Protocol,简单网络管理协议)是网络设备管理标准协议.为了便于设备管理,现在联入网络的智能设备都支持 ...

  2. Asp.Net MVC3(三)-MvcApp实现全局异常捕获

    定义异常捕获类: [AttributeUsage(AttributeTargets.Method | AttributeTargets.Class, Inherited = true, AllowMu ...

  3. linux下用非root用户重启导致ssh无法连接的问题

    问题描述 安装好了centOS服务器,一直用Secure CRT工具通过ssh服务来远程连接linux,很方便的进行各种操作.今天偶然尝试了一下在非root的一般用户下执行重启服务器的命令,发现一般用 ...

  4. KMP该算法解释(最长公共子)

    一个:介绍KMP算法之前,首先解释一下BF算法 (1)BF算法(传统的匹配算法,是最简单的算法) BF算法是一种常见的模式匹配算法,BF该算法的思想是目标字符串S模式串的第一个字符P的第一个字符,以匹 ...

  5. 小白学Docker之Compose

    承接上篇文章:小白学Docker之基础篇,自学网站来源于https://docs.docker.com/get-started 概念 Compose是一个编排和运行多容器Docker应用的工具,主要是 ...

  6. alpha-咸鱼冲刺day7(后续一波)-紫仪

    总汇链接 一,合照 emmmmm.自然还是没有的. 二,项目燃尽图 三,项目进展 正在写登陆+注册ing 注册搞出来了!!!!!!!!QAQ(喜极而泣!!!!.jpg) 四,问题困难 数据流程大概是搞 ...

  7. [AHOI 2012]树屋阶梯

    Description 暑假期间,小龙报名了一个模拟野外生存作战训练班来锻炼体魄,训练的第一个晚上,教官就给他们出了个难题.由于地上露营湿气重,必须选择在高处的树屋露营.小龙分配的树屋建立在一颗高度为 ...

  8. 解决WCF“接收对 http://xxx.svc 的 HTTP 响应时发生错误。这可能是由于服务终结点绑定未使用 HTTP 协议造成的。这还可能是由于服务器中止了 HTTP 请求上下文(可能由于服务关闭)所致&quot;

    最近在工作中新加了一个接口,本地调试的时候,直接抛出“接收对 http://xxx.svc 的 HTTP 响应时发生错误.这可能是由于服务终结点绑定未使用 HTTP 协议造成的.这还可能是由于服务器中 ...

  9. pandas.read_csv用法(转)

    的数据结构DataFrame,几乎可以对数据进行任何你想要的操作. 由于现实世界中数据源的格式非常多,pandas也支持了不同数据格式的导入方法,本文介绍pandas如何从csv文件中导入数据. 从上 ...

  10. HDU 5936 Difference(折半搜索(中途相遇法))

    http://acm.hdu.edu.cn/showproblem.php?pid=5936 题意: 定义了这样一种算法,现在给出x和k的值,问有多少个y是符合条件的. 思路: y最多只有10位,再多 ...