客户端HTML文件上传下载示例

3星 · 超过75%的资源需积分: 10 172 浏览量更新于2024-10-08 1 收藏 1KB TXT 举报

在这个HTML上传下载小例子中，我们将探讨如何在纯客户端环境中实现基本的文件操作，即允许用户选择或保存文本文件（如HTML和TXT）。主要涉及的技术是HTML中的`<object>`元素和JavaScript函数。首先，HTML代码中包含了一个`<object>`元素，它引用了`clsid:F9043C85-F6F2-101A-A3C9-08002B2F49FB`，这是Microsoft的ActiveX控件，特别是用于文件对话框（fileDialog），通常与Windows平台上的文件浏览器功能集成。这个对象允许用户浏览并选择文件，通过设置`Filter`属性来限制文件类型，如指定只允许打开HTML (.htm) 或文本 (.txt) 文件。接着，有两个按钮，一个是`loadDoc()`，另一个是`saveDoc()`。点击`loadDoc()`按钮时，会调用JavaScript函数来执行以下操作： 1. 设置`fileDialog`的`CancelError`属性为`true`，以防止用户取消操作时出现错误。 2. 使用`ShowOpen()`方法显示文件选择对话框，让用户选择一个文件。 3. 创建`Scripting.FileSystemObject`实例，这是一个用于文件操作的对象。 4. 打开用户选择的文件，读取其内容，并将读取到的文本全部存储到`<textarea>`元素（TxtBody）中，以便于用户查看。而点击`saveDoc()`按钮时，会执行以下操作： 1. 设置`fileDialog`选项，与上一步相同，用于文件保存。 2. 使用`ShowSave()`方法显示文件保存对话框，让用户指定保存位置。 3. 创建一个新的文本文件，如果文件不存在则创建，然后将`<textarea>`元素的内容写入文件。 4. 关闭文件。这个例子展示了如何在HTML中使用简单JavaScript交互实现基本的文件操作，虽然它是在客户端完成的，且不涉及服务器端处理，但对于初学者来说，这是一个学习HTML与本地文件系统交互的好起点。需要注意的是，由于浏览器安全性和跨域限制，这种本地文件操作在现代浏览器中可能受到限制，尤其是在HTTPS环境中。实际开发中，上传和下载文件通常会涉及服务器端的配合。

<html>
<object id="fileDialog" width="0px" height="0px" classid="clsid:F9043C85-F6F2-101A-A3C9-08002B2F49FB" codebase="http://activex.microsoft.com/controls/vb5/comdlg32.cab">
</object>
<textarea id=TxtBody style="background-color:#EEEEEE;width:100%;height:100">无标题</textarea>
<br>
<input type=button value=加载 onclick="loadDoc()">
<input type=button value=保存 onclick="saveDoc()">
<script>
function loadDoc()
{
fileDialog.CancelError=true;
try{
fileDialog.Filter="HTM Files (*.htm)|*.htm|Text Files (*.txt)|*.txt";
fileDialog.ShowOpen();
var fso=new ActiveXObject("Scripting.FileSystemObject");
var reading=1;
var f=fso.OpenTextFile(fileDialog.filename,reading);
//window.confirm(f);
var r=f.ReadAll();
f.close();
TxtBody.value=r;
}catch(e){}
}
function saveDoc()
{
fileDialog.CancelError=true;
try{
fileDialog.Filter="HTM Files (*.htm)|*.htm|Text Files (*.txt)|*.txt";
fileDialog.ShowSave();
var fso=new ActiveXObject("Scripting.FileSystemObject");

下载后可阅读完整内容，剩余1页未读，立即下载

michxu

粉丝: 6
资源: 9

客户端HTML文件上传下载示例

html5实现的文件上传预览功能

html上传图片直接显示，JS实现图片上传直接显示

html java 无刷新上传 下载 源码及war包

利用jsDelivr和Github来建立一个简单的网盘，写个html上传下载例子

jeecgboot文件上传例子

给一些el-upload替换已上传文件的例子

js 怎么实现文件上传和下载

写一个html，一个按键功能用于上传图片，一个按键用于下载图片

vue图片与表单一起上传例子

flask 文件上传web 下载

最新资源

html java 无刷新上传下载源码及war包