`
zpsailor
  • 浏览: 43728 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

JS访问本地文件---模拟资源管理器

阅读更多
最近在学习js的时候练习做了一个模拟windows资源管理器的程序,其中主要涉及了使用js访问本地文件的 一些知识,拿出来大家分享下,本程序使用到了两个html文件,两个文件放到同一个目录下可使用,如下:

文件一:windows资源管理器.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script>
fso = new ActiveXObject("Scripting.FileSystemObject");
   function getFolder(id){
   obj = $(id);//取得为这个id值的对象
statu = $(id+"_status");
if(statu.innerHTML=="-"){
   statu.innerHTML="+";
   obj.removeChild(obj.childNodes(0));
   return;
}else{
   statu.innerHTML="-";
}
    var folder = fso.GetFolder(id+":\\");
parent.MyComputer.location=folder;
   var fc=new Enumerator(folder.SubFolders);//folder.SubFolders:返回一个 Folders 集合,由指定文件夹中包含的所有文件夹组成
var a="<ul>";
for (; !fc.atEnd(); fc.moveNext())//moveNext()方法将当前项移动到Enumerator的下一项中去
   {
      a += "<li onclick='getFolders(this)'>"+fc.item()+"</li>"; //item 方法返回 Enumerator                         对象中的当前项。如果集合为空或如果当前项未被定义,它将返回 undefined。
   }a+="<ul>";
obj.innerHTML+=a;
   }  
   function getFolders(obj){
   if(obj!=event.srcElement)return;//获取当前鼠标点击的对象
if(obj.childNodes.length>1){
obj.removeChild(obj.childNodes(1));
   return;
}
var folder = fso.GetFolder(obj.innerHTML);
   parent.MyComputer.location=folder;
   var fc=new Enumerator(folder.SubFolders);
if(fc.atEnd()){
return;
}
var a="<ul>";
for (; ; fc.moveNext())
   { if(fc.atEnd())break;
      a += "<li onclick=\"getFolders(this);\">"+fc.item()+"</li><br>";     
   }a+="<ul>";
obj.innerHTML+=a;
   }
   function $(id){return document.getElementById(id);}
</script>
<body>
<span onclick="getFolder('a')">本地磁盘(A)</span> <span id="a_status">+</span> [驱动器未就绪]<span id="a"></span><br />
<span onclick="getFolder('c')">本地磁盘(C)</span> <span id="c_status">+</span> <span id="c"></span><br />
<span onclick="getFolder('d')">本地磁盘(D)</span> <span id="d_status">+</span> <span id="d"></span><br />
<span onclick="getFolder('e')">本地磁盘(E)</span> <span id="e_status">+</span> <span id="e"></span><br />
<span onclick="getFolder('f')">本地磁盘(F)</span> <span id="f_status">+</span> <span id="f"></span><br />
<span onclick="getFolder('g')">本地磁盘(G)</span> <span id="g_status">+</span> <span id="g"></span><br />
<span onclick="getFolder('h')">本地磁盘(H)</span> <span id="h_status">+</span> [驱动器未就绪]<span id="h"></span>
</body>
</html>


文件2:模拟资源管理器.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>模拟资源管理器</title>
</head>
<body>
<iframe src="windows资源管理器.html" width="20%" height="100%" frameborder="1" scrolling="auto"></iframe>
<iframe name="MyComputer" src="about:blank" width="80%" height="100%" frameborder="1" scrolling="auto"></iframe>
</body>
</html>
0
0
分享到:
评论

相关推荐

    windows资源管理器(JavaScript)

    JavaScript编写的Windows资源管理器是一种基于Web的文件管理和交互系统,它模拟了传统桌面操作系统中的文件浏览器功能。这种实现方式通常依赖于HTML5的File API、AJAX技术以及可能的前端框架,如React、Vue或Angular...

    javascript写的windows资源管理器 -源码.zip

    8. **Node.js和Electron**:如果资源管理器是一个桌面应用,可能使用Node.js后端支持和Electron框架来构建,提供本地文件系统访问权限。 9. **JSON**:可能用于存储配置信息或与服务器通信的数据交换格式。 10. **...

    微信小程序文件上传(手机文件管理器上传)

    3. **权限管理**:由于涉及到用户的隐私数据,因此在访问本地文件时,需要获取用户的权限。微信小程序会自动处理一部分权限问题,但在某些特定情况下,开发者可能需要手动处理。 4. **文件预处理**:在上传之前,...

    vue-cli中config目录下的index.js文件详解

    - **含义**:将 `/api` 和 `/pop-shared-web-components` 请求代理到相应的服务器地址,方便本地开发时模拟后端接口。 - **CSS Source Map**:默认关闭,因为相对路径可能会导致问题。 - **示例代码**: ```...

    Android 浏览本地文件,文件夹

    总结来说,实现Android本地文件和文件夹的浏览功能涉及多个方面,包括文件操作、用户界面设计、权限管理、第三方库的集成等。Android Studio提供了强大的工具和丰富的资源,使得这个过程相对顺畅。通过理解和应用...

    javascript写的模拟器运行linux--jslinux

    这是因为浏览器出于安全原因,不允许本地文件直接执行JavaScript,因此你需要将这些文件上传到一个Web服务器,然后通过HTTP或HTTPS协议访问。一旦设置好服务器并指向正确的文件路径,你就可以在浏览器中输入URL,...

    空间也能本地化--网站整站下载工具

    网站整站下载工具通过模拟浏览器的行为,遍历网站的每一个链接,抓取HTML、CSS、JavaScript、图片和其他相关文件。这些工具会遵循网站的超链接结构,确保下载的文件能按照原始的目录结构组织,从而在本地形成一个...

    JS网页模拟windows操作系统桌面后台管理框架

    6. **文件系统**:虽然JavaScript在浏览器环境下不能直接访问本地文件系统,但可以通过模拟的文件浏览器或者使用Web API(如FileReader和FileWriter)来模拟文件的浏览、上传和下载。 7. **菜单和对话框**:实现...

    JavaScript 项目-OS.js.zip

    5. **文件系统模拟**:OS.js通过模拟本地文件系统,允许用户在浏览器内创建、编辑和管理文件。这可能通过使用HTML5的File API来实现,该API允许在浏览器内读写文件,或者通过服务器端接口与实际的云存储服务交互。 ...

    EXT2.0在本地浏览API的插件

    由于浏览器的安全限制,JavaScript通常无法直接访问用户的本地文件系统。然而,这个插件通过模拟XMLHttpRequest(XHR)对象,实现了在EXT2.0中读取和操作本地文件的功能,这被称为`localXHR.js`。 `localXHR.js`的...

    ASP网站的模拟软件

    5. **文件结构理解**: 在模拟环境中,开发者需要了解ASP网站的基本文件结构,包括.asp文件(包含脚本和HTML)、.dll文件(动态链接库)、.vbs/.js文件(脚本文件)、配置文件(如web.config)等。 6. **数据库连接*...

    用于文件打包后,启动的本地服务

    例如,开发环境和生产环境的API地址通常是不同的,所以当从远程服务器下载的文件在本地运行时,需要更新这些请求地址以避免访问错误。 “设置本地服务器”标签进一步确认了这是一个关于本地环境配置的任务。本地...

    Ext模拟Windows桌面

    7. **文件管理器**:虽然不是所有模拟桌面都会包含,但可以使用Ext JS的GridPanel和TreePanel组件来创建一个类似于Windows资源管理器的界面,让用户浏览和管理虚拟文件系统。 8. **自定义皮肤和主题**:为了增强...

    Cesium-1.30开发库,提供web 3D javascript库

    5. **性能优化**:Cesium通过LOD(Level of Detail)技术实现了高效的资源管理,根据对象距离摄像机的距离自动调整细节水平,确保在大规模场景中的流畅运行。 6. **Node.js与npm/cnpm**:虽然Cesium主要作为浏览器...

    文件上传到项目附属文件支持下载.rar

    1. **文件上传**:文件上传是指用户通过Web界面将本地文件传输到服务器的过程。在这个场景中,`CmFileService.java`可能是后端处理文件上传的服务类。它通常包含了接收HTTP请求,验证文件类型、大小等安全性检查,...

    02-搭建VUE前端项目

    该项目基于Vue.js框架和Element UI库开发,具备现代化的前端技术栈,支持国际化(i18n)、动态路由、权限验证等功能,并提供了丰富的功能组件,能够帮助开发者快速搭建出高质量的后端管理界面。 #### 2. 技术栈概述 -...

    php远程图片本地化插件

    在PHP开发中,远程图片本地化插件是一个重要的工具,它允许开发者将互联网上的图片资源下载到本地服务器,以便提高网站加载速度、节省带宽、防止因原图源站问题导致图片无法显示,并且可以更好地保护网站内容的完整...

    pywebcmd:Python Web文件管理器

    "pywebcmd: Python Web文件管理器"是一个基于Python开发的Web界面文件管理工具,它允许用户通过浏览器来实现对本地文件系统的操作和管理。这个项目目前处于持续开发的状态,这意味着它可能包含新功能,同时也可能...

Global site tag (gtag.js) - Google Analytics