js实现点击按钮弹出上传文件的窗口
1.详细描述
在页面上设置一个“选择文件”按钮,点击该按钮,会弹出本地磁盘信息用于选择文件。
2.代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo</title> <script type="text/javascript"> function F_Open_dialog() { document.getElementById("btn_file").click(); } </script> </head> <body> <div> <input type="file" id="btn_file" style="display:none"> <button type="button" onclick="F_Open_dialog()">选择文件</button> </div> </body> </html>
3.操作示例
将代码复制到W3CSchool的测试页面,提交运行之后如图:在查看结果页面会出现“选择文件”这个按钮
之后点击“选择文件”后如图:页面上会出现弹窗,显示本地磁盘信息,用于选择文件。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持我们!
相关推荐
-
js获取上传文件的绝对路径实现方法
在html中 <input type="file" id="importFile" /> <input type="button" onclick="upload()"/> <script> function upload() { var filename = document.getElementById("importFile").value; // 这时的filen
-
JS控制FileUpload的上传文件类型实例代码
JS代码如下: function CheckFile(obj) { var array = new Array('gif', 'jpeg', 'png', 'jpg'); //可以上传的文件类型 if (obj.value == '') { alert("让选择要上传的图片!"); return false; } else { var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //这个文件类型正则很有用:)
-
JS文件/图片从电脑里面拖拽到浏览器上传文件/图片
1.效果展示 2.html 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./upload.js"></script> <style> #drop img{width: 100px;he
-
JS中使用FormData上传文件、图片的方法
关于FormData XMLHttpRequest Level 2添加了一个新的接口 ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F
-
真正好用的js验证上传文件大小的简单方法
最近使用到一个文件上传功能,发现恶意上传一个2G文件时,后台处理响应较慢,遂想到能否使用js来进行客户端的验证.但查阅网上多处资料,均使用 ActiveXObject("Scripting.FileSystemObject"); 的方法,该方法需要将Internet选项中安全级别提高,启用一个系统本身不推荐的选项,会出现如下非常不友好的提示: 所以这边并没有用到,而是寻求其他方法. 这边新的思路是img标签中的dynsrc属性. 在FireFox.Chrome浏览器中可以根据docum
-
js实现上传文件添加和删除文件选择框
本文这里给大家说个用javascript实现的很实用的功能,是在上传附件的时候,可以动态地添加和删除文件选择框,然后一次性上传. 从理论上看,实现起来比较容易,但实际工作的时候还是遇到两个难点,这些难点归结起来都是一个原因造成的,那就是浏览器的兼容性.在脚本中要用到两个函数:insertAdjacentHTML和removeChild,而恰好这两个函数在Firefox下都不能正常使用.几乎花费了一天的时候,在网上搜索着解决的方法,还好被找到了,也让我大松一口气. 具体两个函数是这样的: <scr
-
JavaScript检测上传文件大小的方法
本文实例讲述了JavaScript检测上传文件大小的方法.分享给大家供大家参考.具体如下: 通过JS客户端代码限制用户上传文件的大小,但是客户端的验证只是辅助的,服务器端一定还要再做验证 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http
-
JavaScript判断FileUpload控件上传文件类型
为了代码变得更加简捷,笔者使用了正则表达式来获取文件扩展名,如果读者对正则表达式不太了解或者从来没有接触过,请马上恶补一下吧!毕竟它非常重要,大多数的编程语言都支持正则表达式. 大家都知道,后台获取FileUpload扩展名方法: string ext = Path.GetExtension(fu.PostedFile.FileName); JS判断FileUpload控件上传文件的扩展名: <html xmlns="http://www.w3.org/1999/xhtml"&g
-
JS实现浏览上传文件的代码
废话不多说了,直接给大家贴代码了,具体代码如下所示: <div style="position:relative;width:380px;"> <iframe id="t_load" name="t_load" style="display: none"></iframe> <form action="" method="post" enctyp
-
jQuery实现jQuery-form.js实现异步上传文件
做为一个前端开发,你肯定遇到过这样的需求:异步上传文件,还要兼容IE 8.[纳尼,没遇到过,那你们产品和UI对你也忒好了吧. 遇到这种需求,如果项目不是很赶,可以自己用iframe来做,如果项目比较赶的话,就可以使用jquery-form.js插件来实现,方便快捷. 一.举个栗子 1.先下载 JQuery-form.js文件并引入,也可以使用CDN,因为是jquery插件,所以需要先引入jquery. 2.html 部分: <form action='' enctype="multipar
随机推荐
- 理解web服务器和数据库的负载均衡以及反向代理
- javascript 写类方式之八
- 解决java后台登录前后cookie不一致问题
- iOS开发中UISwitch按钮的使用方法简介
- iOS图片拉伸的方法
- KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
- PHP中PDO的错误处理
- Mysql select in 按id排序实现方法
- 利用php操作memcache缓存的基础方法示例
- python抓取京东价格分析京东商品价格走势
- ajax交互Struts2的action(客户端/服务器端)
- jQuery拖动布局其结果保存到数据库
- 初识PostgreSQL存储过程
- 彻底删除Oracle数据库的方法
- jQuery+css实现的换页标签栏效果
- 用JavaScript实现页面重定向功能的教程
- python 布尔操作实现代码
- Java知识点归纳总结
- C++中的四种类型转换
- Android如何利用RecyclerView实现列表倒计时效果实例代码