本文目录一览:
- 1、file控件选择上传文件确定后触发的js事件是哪个?
- 2、file控件选择上传文件确定后触发什么js事件
- 3、js中如何点击一个按钮弹出一个file文件框
- 4、javascript实现: 会弹出文件选择框,选择后缀为*.txt的文件
- 5、用js如何实现点击按钮打开一个指定路径下的文件
- 6、js点击选择文件目录的功能
file控件选择上传文件确定后触发的js事件是哪个?
file控件选择上传文件确定后触发的js事件是onchange事件。
file控件:
input type = "file" id = "idName" multiple = "multiple"
document.getElementById("idName").file; //返回的是fileList对象。
fileList对象的常用方法有name(文件名称)、type(文件类型)、size(文件大小)、lastModefiedDate(文件的最后修改时间)等
默认情况下,选择文件为单选,但是加上multiple属性之后,即可以多选。
此处的multiple属性,只写”multiple”或者是写成”multiple=’multiple’”这种形式都是可以,这点类似于autofocus,loop这类属性。个人习惯写成multiple=’multiple’这种格式。
此外,file控件还有accept属性,用于指定选择文件类型。
file控件选择上传文件确定后触发什么js事件
1、定义一个Html文件,编写file控件。
2、在html文件中增加js代码,监听File控件。
3、预览页面效果。
4、上面的上传文件比较复杂,可以用jquery更简便的方法。
5、点击选择文件按钮,进行选择文件。
6、编辑完ihtml文件后,用浏览器打开html文件,当鼠标左键单击span时显示"触发鼠标单击事件",双击span时显示"事件",完成关闭。
js中如何点击一个按钮弹出一个file文件框
js中点击一个按钮弹出一个file文件框的步骤如下:
1.在文件夹中创建一个html文件“test”。
2.在test文件中添加一个html的框架。
3.添加两个input,一个是button,一个是file把id设置为“open”style类型设置为“display:none”不显示。
4.打开后我们发现只显示这一个“打开文件”按钮。
5.现在我们给button添加onclick事件,调用openfile触发id为“open”的file。
6.现在我们在浏览器中点击“打开文件”文件按钮就会弹出选择文件路径对话框了。这样就解决了js中点击一个按钮弹出一个file文件框的问题了。
javascript实现: 会弹出文件选择框,选择后缀为*.txt的文件
面一段代码是基于js实现的点击某个图标或按钮弹出文件选择框的核心代码,代码比较简单,需要的朋友参考下
具体代码如下所示:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
HTML
head
script type="text/javascript" src="script/jquery-1.6.2.min.js"/script
script type=‘text/javascript‘
function selectFile(){
//触发 文件选择的click事件
$("#file").trigger("click");
//其他code如 alert($("#file").attr("value"))
}
/* 获取 文件的路径 ,用于测试*/
function getFilePath(){
alert($("#file").attr("value"));
}
/script
/head
body
!-- 给这个input 设置样式隐藏,切忌不可用display控制隐藏,可能不能跨浏览器 --
input type="file" id="file" onchange="getFilePath()"
style="filter:alpha(opacity=0);opacity:0;width: 0;height: 0;"/
button onclick="selectFile();"select file/button
button onclick="getFilePath()"get FilePath/button
/body
/html
选择后缀就需要去写个函数方法了!
用js如何实现点击按钮打开一个指定路径下的文件
方法步骤如下:
1、首先,打开计算机,然后打开JS,在其中创建一个HTML文件“test”。
2、然后将HTML框架添加到测试文件中。
3、然后添加两个输入,一个是button,另一个是file将ID设置为“open”样式类型为“display:None”并且不显示。
4、打开后,仅显示此“打开文件”按钮。
5、现在将onclick事件添加到按钮,并调用openfile来触发ID为“open”的文件。
6、现在单击浏览器中的“打开文件”就会弹出选择文件路径对话框。
js点击选择文件目录的功能
最近做一个小项目,前端需要有一个功能是点击某按钮时,弹出文件选择的框,然后获取目录并写入对应的输入框里,以往是选择某个文件进行上传,功能看起来有些像,但这次不同的是只能选择某个目录而不是文件,因为它并不是上传,它只是为了选择后台生成的文件保存的路径。
于是网上查解决方案,查到两种,
一种是仅在谷歌浏览器上有效的方式,在input节点里加一个属性 webkitdirectory,就可以实现点击弹出选择目录的功能,然后就可以截取目录,此种方式对非空文件夹是可以的实现的,只需监听此input的change事件即可,但如果选择的是空文件夹,就不会触发事件,就无法获取路径,所以这方法不复合我的需求。
另一种是只适用于IE浏览器的方式,即调用IE的activeX控件,为点击按钮绑定事件,然后就可以获取目录,然后到目录调到想要的地方即可,具体实现方式是:
input id="show"
button onclick="clickBtn()"点击/button
function click() {
try {
var Message = "\u8bf7\u9009\u62e9\u6587\u4ef6\u5939"; //选择框提示 var Shell = new ActiveXObject("Shell.Application");
var Folder = Shell.BrowseForFolder(0, Message, 64, 17); //起始目录为:我的电脑 //var Folder = Shell.BrowseForFolder(0, Message, 0); //起始目录为:桌面 if (Folder != null) {
Folder = Folder.items(); // 返回 FolderItems 对象
Folder = Folder.item(); // 返回 Folderitem 对象
Folder = Folder.Path; // 返回路径
if (Folder.charAt(Folder.length - 1) != "\\") {
Folder = Folder + "\\";
}
document.getElementById('show').value = Folder;
return Folder;
}
} catch (e) { alert(e.message); }
}
但些方式也有一个问题是,此控件是默认关闭的,需要用户手动启用,并且要把本站点加入可信任站点才行,具体设置过程是:
1. 单击菜单工具-Internet选项-安全-受信任站点-站点-把此网站设为可信站点
2. 在自定义级别-对没有标记为安全的ActiveX控件进行初始化和脚本运行"----"启用"