javascript打开选择对话框/保存对话框

最新推荐文章于 2018-04-13 16:34:38 发布

转载最新推荐文章于 2018-04-13 16:34:38 发布 · 1.5w 阅读

文章标签：

#javascript #file #button #input #浏览器 #任务

ASP.NET 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何在网页中实现文件的选择与保存功能。通过隐藏的 file 输入框触发点击事件完成文件选择，同时利用 MSComDlg.CommonDialog 对象实现保存文件对话框，并设置类型过滤与最大文件大小。

【引用地址】http://hi.baidu.com/rayshow/blog/item/9102258daac46810b31bbad3.html

在浏览器中虽然打开选择对话框和保存文件对话框的功能并不常使用，但有时仍然会用得上，比如一个web版的播放器，让用户选择本地的视频或音频文件等。对于打开选择文件对话框来说，相对比较简单，只需要在页面内放一个file标签，可以将其display设置为none，使用图片、按钮及链接来模拟file的单击事件，从而实现选择文件的任务。具体实现如下所示：<html> <head> <title> New Document </title> </head> <body> <input type="file" id="file" style="display:none" mce_style="display:none"> <input type="button" value="click" onClick="ok()"> </body> <mce:script language="JavaScript"></mce:script> </html>

对于打开保存文件对话框可以使用MSComDlg.CommonDialog对象，并且可以设置类型过滤，但是需要设置MaxFileSize属性，否则会出现错误。其具体实现如下所示。

【引用地址】http://hi.baidu.com/rayshow/blog/item/9102258daac46810b31bbad3.html 在浏览器中虽然打开选择对话框和保存文件对话框的功能并不常使用，但有时仍然会用得上，比如一个web版的播放器，让用户选择本地的视频或音频文件等。对于打开选择文件对话框来说，相对比较简单，只需要在页面内放一个file标签，可以将其display设置为none，使用图片、按钮及链接来模拟file的单击事件，从而实现选择文件的任务。具体实现如下所示： <html> <head> <title> New Document </title> </head> <body> <input type="file" id="file" style="display:none" mce_style="display:none"> <input type="button" value="click" onClick="ok()"> </body> <mce:script language="JavaScript"></mce:script> </html> 对于打开保存文件对话框可以使用MSComDlg.CommonDialog对象，并且可以设置类型过滤，但是需要设置MaxFileSize属性，否则会出现错误。其具体实现如下所示。 <html> <head> <title> New Document </title> </head> <body> <input type="button" value="保存" onclick="document.execCommand('SaveAs')"> </body> <mce:script language="JavaScript"></mce:script> </html>