最近在学习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>
分享到:
相关推荐
JavaScript编写的Windows资源管理器是一种基于Web的文件管理和交互系统,它模拟了传统桌面操作系统中的文件浏览器功能。这种实现方式通常依赖于HTML5的File API、AJAX技术以及可能的前端框架,如React、Vue或Angular...
8. **Node.js和Electron**:如果资源管理器是一个桌面应用,可能使用Node.js后端支持和Electron框架来构建,提供本地文件系统访问权限。 9. **JSON**:可能用于存储配置信息或与服务器通信的数据交换格式。 10. **...
3. **权限管理**:由于涉及到用户的隐私数据,因此在访问本地文件时,需要获取用户的权限。微信小程序会自动处理一部分权限问题,但在某些特定情况下,开发者可能需要手动处理。 4. **文件预处理**:在上传之前,...
- **含义**:将 `/api` 和 `/pop-shared-web-components` 请求代理到相应的服务器地址,方便本地开发时模拟后端接口。 - **CSS Source Map**:默认关闭,因为相对路径可能会导致问题。 - **示例代码**: ```...
总结来说,实现Android本地文件和文件夹的浏览功能涉及多个方面,包括文件操作、用户界面设计、权限管理、第三方库的集成等。Android Studio提供了强大的工具和丰富的资源,使得这个过程相对顺畅。通过理解和应用...
这是因为浏览器出于安全原因,不允许本地文件直接执行JavaScript,因此你需要将这些文件上传到一个Web服务器,然后通过HTTP或HTTPS协议访问。一旦设置好服务器并指向正确的文件路径,你就可以在浏览器中输入URL,...
网站整站下载工具通过模拟浏览器的行为,遍历网站的每一个链接,抓取HTML、CSS、JavaScript、图片和其他相关文件。这些工具会遵循网站的超链接结构,确保下载的文件能按照原始的目录结构组织,从而在本地形成一个...
6. **文件系统**:虽然JavaScript在浏览器环境下不能直接访问本地文件系统,但可以通过模拟的文件浏览器或者使用Web API(如FileReader和FileWriter)来模拟文件的浏览、上传和下载。 7. **菜单和对话框**:实现...
5. **文件系统模拟**:OS.js通过模拟本地文件系统,允许用户在浏览器内创建、编辑和管理文件。这可能通过使用HTML5的File API来实现,该API允许在浏览器内读写文件,或者通过服务器端接口与实际的云存储服务交互。 ...
由于浏览器的安全限制,JavaScript通常无法直接访问用户的本地文件系统。然而,这个插件通过模拟XMLHttpRequest(XHR)对象,实现了在EXT2.0中读取和操作本地文件的功能,这被称为`localXHR.js`。 `localXHR.js`的...
5. **文件结构理解**: 在模拟环境中,开发者需要了解ASP网站的基本文件结构,包括.asp文件(包含脚本和HTML)、.dll文件(动态链接库)、.vbs/.js文件(脚本文件)、配置文件(如web.config)等。 6. **数据库连接*...
例如,开发环境和生产环境的API地址通常是不同的,所以当从远程服务器下载的文件在本地运行时,需要更新这些请求地址以避免访问错误。 “设置本地服务器”标签进一步确认了这是一个关于本地环境配置的任务。本地...
7. **文件管理器**:虽然不是所有模拟桌面都会包含,但可以使用Ext JS的GridPanel和TreePanel组件来创建一个类似于Windows资源管理器的界面,让用户浏览和管理虚拟文件系统。 8. **自定义皮肤和主题**:为了增强...
5. **性能优化**:Cesium通过LOD(Level of Detail)技术实现了高效的资源管理,根据对象距离摄像机的距离自动调整细节水平,确保在大规模场景中的流畅运行。 6. **Node.js与npm/cnpm**:虽然Cesium主要作为浏览器...
1. **文件上传**:文件上传是指用户通过Web界面将本地文件传输到服务器的过程。在这个场景中,`CmFileService.java`可能是后端处理文件上传的服务类。它通常包含了接收HTTP请求,验证文件类型、大小等安全性检查,...
该项目基于Vue.js框架和Element UI库开发,具备现代化的前端技术栈,支持国际化(i18n)、动态路由、权限验证等功能,并提供了丰富的功能组件,能够帮助开发者快速搭建出高质量的后端管理界面。 #### 2. 技术栈概述 -...
在PHP开发中,远程图片本地化插件是一个重要的工具,它允许开发者将互联网上的图片资源下载到本地服务器,以便提高网站加载速度、节省带宽、防止因原图源站问题导致图片无法显示,并且可以更好地保护网站内容的完整...
"pywebcmd: Python Web文件管理器"是一个基于Python开发的Web界面文件管理工具,它允许用户通过浏览器来实现对本地文件系统的操作和管理。这个项目目前处于持续开发的状态,这意味着它可能包含新功能,同时也可能...