关于H5中的FileReader-调用系统文件夹(读取文件信息)

最新推荐文章于 2024-05-15 18:27:54 发布
最新推荐文章于 2024-05-15 18:27:54 发布
阅读量3k 收藏 2
点赞数
文章标签： H5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
//显示上传文件名字
var file;
function ShowName() {
for(var i = 0; i < document.getElementById("file").files.length; i++) {
file = document.getElementById("file").files[i];
alert(file.name);
}
}
//文件的属性
function ShowFileType() {
file = document.getElementById("file1").files[0];
var size = document.getElementById("size");
size.innerHTML = file.size;
var type = document.getElementById("type");
type.innerHTML = file.type;
}
//过滤文件
function FileUpload() {
for(var i = 0; i < document.getElementById("file2").files.length; i++) {
file = document.getElementById("file2").files[i];
if(!/image\/\w+/.test(file.type)) {
alert(file.name + "不是图像文件");
} else {
alert(file.name + "可以上传");
}
}
}
//判断浏览器是否支持FileReader对象
function tyFileReader() {
if(typeof FileReader === 'undefined') {
alert("当前浏览器不支持");
} else {
alert("当前浏览器支持");
}
}
//读取图片并显示
function readFileImg() {
file = document.getElementById("file3").files[0];
if(!/image\/\w+/.test(file.type)) {
alert(file.name + "不是图像文件");
} else {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function(e) {
var result = document.getElementById("result");
result.innerHTML = '<img src="' + this.result + '" alt=""/>';
}
}
}
//读取文本并显示
function readFileText() {
file = document.getElementById("file4").files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(e) {
var result = document.getElementById("result1");
alert(file.size)
result1.innerHTML = this.result;
}
}
</script>
</head>


<body>
<input type="file" multiple size="50" id="file" /><br />
<input type="button" οnclick="ShowName();" value="上传文件" /><br />
<br />
<input type="file" id="file1" /><br />
<input type="button" οnclick="ShowFileType();" value="显示文件信息" /><br /> 文件字节长度：
<span id="size"></span><br /> 文件类型：
<span id="type"></span><br />
<br />
<input type="file" multiple size="50" id="file2" /><br />
<input type="button" οnclick="FileUpload();" value="上传文件" /><br />
<br />
<input type="button" οnclick="tyFileReader();" value="判断" /><br />
<br />
<p>
<label>请选择一个文件：</label>
<input type="file" id="file3" /><br />
<input type="button" οnclick="readFileImg();" value="读取文件" /><br />
</p>
<div name="result" id="result"></div>
<!--在这里显示读取结果-->
<br/><br />


<p>
<label>请选择一个文件：</label>
<input type="file" id="file4" /><br />
<input type="button" οnclick="readFileText();" value="读取文件" /><br />
</p>
<div name="result1" id="result1">
<!--在这里显示读取结果,这里需要调整编码方式-->
</div>
</body>


</html>
TheKingLei
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
嵌套页面h5怎么调起手机文件_以 web-view 嵌入在小程序中 h5 页面，如何处理附件下载...
weixin_33750664的博客
01-12 1200
前言由于项目体积过大，以至于分包后也逐步超过了小程序的限制，所以将 h5 端的页面以 web-view 的方式嵌入了小程序。这也产生了一些意料之外的问题，这里记一个关于文件预览下载的问题。在 h5 端中，针对图片和视频会使用 img、video 标签达到预览的效果，其余的文件类型会直接粗暴的调用 window.open 的方式打开，如果浏览器能够解析则预览，不能解析浏览器会默认下载。(这里有个问题...
HTML5读取本地文件
tfnco的专栏
04-28 3672
HTML5为我们提供了一种与本地文件系统交互的标准方式：File Api。 该规范主要定义了以下数据结构： File FileList Blob HTML5访问本地文件系统时，需要先获取File对象句柄，怎么获取文件引用句柄呢？ 选择文件 首先检测一下当前浏览器是否支持File Api： 1 2 3 4 5 6
H5页面选择本地路径
最新发布
Zmikoo学习之路
05-15 188
点击按钮获取本地路径。
html5 本地文件操作系统,读取目录 - createReader《 HTML5：文件系统 》
weixin_30633869的博客
06-17 1177
调用目录的 createReader 方法，它会返回一个 DirectoryReader 对象，然后调用这个 DirectoryReader 对象的 readEntries 方法，可以得到目录所包含的项目，使用一个循环语句，可以输出所有的项目。下面我们试试列出文件系统根目录下的所有的文件和目录。先定义一个变量 ... 叫做 directoryReader ... 它的值是使用 createRead...
HTML5 FileReader分布读取文件以及其方法简介
翾的博客
05-02 3011
效果图老规矩先上效果图 先介绍一下H5中FileReader的一些方法以及事件FileReader方法 名称 作用 about() 终止读取 readAsBinaryString(file) 将文件读取为二进制编码 readAsDataURL(file) 将文件读取为DataURL编码 readAsText(file, [encoding]) 将文件读取为文本
06 H5直接使用网络文件系统
jklinux的博客
11-07 1166
H5板上有提供有线网卡接口，可以在内核启动进入内存文件系统后，再进入网络文件系统。这样比使用sd卡上的文件系统更便于调试开发.// 在pc上准备好文件系统, 如我已把前面busybox编译得到并已配置好的_install整个目录复制并改名为"/disk3/h5fs"在pc上配置共享nfs目录, 修改/etc/export文件，增加: /disk3/h5fs *(rw,sync,insecure,n
H5 FileReader读取shp文件
06-19
本知识点主要围绕如何利用H5的FileReader API读取特定的地理数据文件——shp文件，并将数据加载到地图上进行展示。 **1. H5 FileReader API** FileReader API是HTML5提供的一种接口，用于读取Blob或File对象中的...
h5页面调用相机、相册、录像、录音
06-08
移动端浏览器和手机APP，h5页面调用相机、相册、录像、录音，可以选择本地相册；以及文件的读取和加载方法， 调用FileReader对象的方法
H5调用相机拍照并压缩图片的实例代码
09-27
- **读取Exif信息**：使用`EXIF.getData(file)`获取文件的Exif信息，然后通过`EXIF.getTag(file, 'Orientation')`获取拍摄方向。 - **旋转操作**：根据获取的`Orientation`值，使用`canvas`进行旋转操作，调整`...
asp.net+h5实现网页调用摄像头拍照功能的完整示例
02-04
文件API如FileReader用于读取图片数据，通常会将图片转换为Base64编码，以便于在网络上传输。 3. **ASP.NET**： ASP.NET是微软提供的一个用于构建Web应用程序的框架。在这个示例中，它主要负责接收前端传递的图片...
H5调用手机相机识别二维码
07-23
其中，“H5调用手机相机识别二维码”是移动互联网中常见的功能，广泛应用于各种场景，如登录验证、商品信息查询等。本篇文章将详细探讨如何在H5页面中实现这一功能，并结合“jsqrcode-master”这个库来解析二维码。 ...
FilePacker—EXE文件打包工具（单文件版）
03-13
FilePacker 简介： 采用向导模式的文件封装工具，可以将数据文件与程序文件封装为一个独立的 EXE 文件，并且内置压缩引擎和密码保护功能，更容易使用。
H5实现调用手机摄像头相册。完美实现图片压缩、预览、删除的功能。---Demo
08-16
本文将深入探讨如何使用H5技术来实现调用手机摄像头、相册，以及图片的压缩、预览和删除功能。这些功能对于移动设备上的网页应用尤其重要，因为它们能够提供与原生应用类似的用户体验。 首先，调用手机摄像头和相册...
H5手机端多文件上传预览插件
11-28
6. **图片预览**：虽然这部分代码没有给出，但通常会使用`FileReader API`来读取文件内容，并生成预览图像，显示在界面上。 7. **多文件上传**：如果需要一次性上传所有选中的文件，可以调用`core.uploadFiles`，它...
h5_preview_document-master.zip
03-21
“h5_preview_document-master”压缩包中的代码提供了简单的API接口，例如预览文档的函数调用，只需传入文件URL或Blob对象即可实现预览。这种设计降低了集成难度，使得开发人员能够快速地在自己的项目中应用这一...
H5+JS页面直接查看PDF文件
12-07
1. **获取PDF数据**：使用Ajax或Fetch API从服务器获取PDF文件的二进制数据，或者通过FileReader API读取本地文件。 2. **转换数据格式**：将获取到的二进制数据转换为Blob对象，然后使用URL.createObjectURL()方法...
file input 移动端选择文件夹_H5 移动端Input File 文件上传以及后端接收
weixin_39712724的博客
02-01 641
前端部分前端部分主要用ajax 上传Base64字符串码$("#fileInput").live("change", function() {var path = $(this).val();var showfilename = $(this).parent().parent().prev(); //展示文件名称的viewshowfilename.show(); //显示展示名称showfilen...
Html读取本地文件夹下文件
热门推荐
祥龙九霄的专栏
08-07 6万+
目的        在Html上选择本地文件夹，自动读取文件夹及子文件夹下的所有文件（本例以图片为例）并显示。 技术分析         存在问题        Html中file标签获取到的路径时相对的。        Html中Img指定源时需要的是绝对路径。         解决方法      调用Web API接口FileReader中readAsDataURL方法读取数据（...
html5 文件系统（一）
等待希望
02-10 1047
我这里写的不是详细的html5的文件操作。网上百度一下。可以搜索到很多这样的信息。 我这里是带大家来认识html5 文件系统的api和在哪里查找这些api。 File API    File API: Writer   File API: Directories and System 然后根据这些api来写一个关于上传图片，立即显示图片的demo。 v
js中使用FileReader读取utf-8与GB2312格式文件不乱码
06-01
在 JavaScript 中，可以使用 `FileReader` 对象来读取文件，并将文件内容以字符串形式返回。为了确保读取的文件不出现乱码，需要指定正确的编码格式。下面是一个示例代码，可以读取 utf-8 和 GB2312 格式的文件，并解决乱码问题： ```javascript function readFile(file, callback) { let reader = new FileReader(); reader.onload = function(event) { let fileContent = event.target.result; callback(fileContent); }; reader.readAsText(file, "GB2312"); // 指定编码格式为 GB2312 } let fileInput = document.getElementById("fileInput"); fileInput.addEventListener("change", function(event) { let file = event.target.files[0]; readFile(file, function(fileContent) { console.log(fileContent); }); }); ``` 在上面的示例代码中，我们使用 `FileReader` 对象读取文件，并指定了编码格式为 GB2312。读取完成后，将文件内容以字符串形式传递给回调函数。在实际使用中，可以根据文件的实际编码格式来指定相应的编码格式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值