js中用链接实现打开本地文件对话框

JavaScript09

js中用链接实现打开本地文件对话框,第1张

JS打开选择本地文件的对话框:

方法一:

在定义的form中添加以下javascript代码:

{

              anchor : '95%',

              xtype: 'fileuploadfield',

              id: 'form-file',

              emptyText: '请选择',

              fieldLabel: '上传附件',

              name: 'meetingAffix',

              buttonText: 'Browse'

    }

单击Browse按钮后可以打开对话框,选中文件后,所选文件路径会出现在上传附件后面的文本框中。

方法二:

在定义的form中添加以下javascript代码:

{

      columnWidth :1,

      layout :'form',

      bodyStyle :'padding:10px',

      defaultType :'textfield',

      labelWidth :120,

      width :1000,

      buttonAlign :'center',

      items : [ {

       fieldLabel :'请选择要上传的文件',

       name :'fileName',

       id :'fileId',

       anchor :'95%',

      allowBlank :false,

       inputType :'file'

      } ]

}

方法三:

给按钮定义以下javascript函数:

var inputObj=document.createElement('input')

         inputObj.setAttribute('id','_ef')

         inputObj.setAttribute('type','file')

         inputObj.setAttribute("style",'visibility:hidden')

         document.body.appendChild(inputObj)

         inputObj.click()

         inputObj.value 

单击已经添加函数的按钮会弹出选择本地文件的对话框。

最近做一个小项目,前端需要有一个功能是点击某按钮时,弹出文件选择的框,然后获取目录并写入对应的输入框里,以往是选择某个文件进行上传,功能看起来有些像,但这次不同的是只能选择某个目录而不是文件,因为它并不是上传,它只是为了选择后台生成的文件保存的路径。 于是网上查解决方案,查到两种, 一种是仅在谷歌浏览器上有效的方式,在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控件进行初始化和脚本运行"----"启用"