Web端打开文件选择和保存对话框

来源：互联网发布：电子产品哪里买好知乎编辑：程序博客网时间：2024/06/14 08:01

总体介绍

文件的选择、保存对话框，使用Java 很容易达成。

如果想在Web端使用的话，可以用Applet 达成。

但如果想使用HTML, js 达成的话，也是可以的。不过

web程序对客户机的文件进行读写是不安全的。ActiveXObject是IE特有的。这种东西本身就是不安全的.

文件选择框通用方式

最常用的就是使用如下方式：

<input type="file" />

这是HTML的标签，基本适用所有的浏览器。产生的效果是带有一个文本框和一个浏览按钮。(在各浏览器的实际效果可能不一样)

点击"浏览" 按钮就可以打开文件选择的dialog 了，选择文件后，文件路径就保存在这个 input 的 value的属性里了。如下例子：

<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT="oscar999"><script>  function getSelectFile()  {      var fileName = document.getElementById("fileSelect").value;      alert(fileName);  }</script></HEAD><BODY> <input id="fileSelect" type="file" /> <input value="Get File" type="button" onclick="getSelectFile();"/></BODY></HTML>

文件保存对话框

你可能会问，既然选择对话框有了，为什么还需要保存的对话框呢？
因为在选择对话框里，不能选择(或输入)一个不存在文件名，所以这对于保存来说不适用。
1. 方式一：使用ActiveX控件，仅支持 IE

<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT="oscar999"><script>  function  saveFile()    {        fileDialog.CancelError=true;        try{         fileDialog.Filter="HTM   Files   (*.html)|*.html|Text   Files   (*.txt)|*.txt";         fileDialog.ShowSave();        }        catch(e){}    }  </script></HEAD><BODY> <object   id="fileDialog"   width="0px"   height="0px"   classid="clsid:F9043C85-F6F2-101A-A3C9-08002B2F49FB"     codebase="http://activex.microsoft.com/controls/vb5/comdlg32.cab">   </object>    <input   type=button   value="Save"   onclick="saveFile()"</BODY></HTML>

2. 使用document.execCommand('SavaAs'), 仅支持 IE

<!--Add by oscar999--><html><head>   <title> New Document </title></head><body>   <input type="button" value="Save" onclick="document.execCommand('SaveAs')"></body></html>

除了IE,其他浏览器貌似都没有打开保存的窗口，用替代方案，直接填入路径：

<!--Add by oscar999--><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Author" CONTENT="oscar999"><script>  function   smt(){  path   =   prompt("Please Input Path",""); }   </script></HEAD><BODY>  <input   type="button"   value="Save"   onclick="smt()">   </BODY></HTML>

获取路径后的处理

获取保存路径后，如何创建文件可以参考：

Web端打开文件选择和保存对话框

总体介绍

文件选择框通用方式

文件保存对话框

获取路径后的处理

JavaScript创建与读写本地文件(IE&Firefox)