扫码关注官方订阅号
84669人学习
65727人学习
82984人学习
467778人学习
498837人学习
471966人学习
256484人学习
152542人学习
224170人学习
139536人学习
81804人学习
85022人学习
11944人学习
20001人学习
60816人学习
5487人学习
15007人学习
2150人学习
6980人学习
194925人学习
359900人学习
1142人学习
19058人学习
3206人学习
180550人学习
48569人学习
17603人学习
40936人学习
1049人学习
750人学习
32909人学习
HTML5怎么访问本地文件？
HTML5怎么访问本地文件？-PHP中文网问答-HTML5怎么访问本地文件？-PHP中文网问答
围观一下哦，学习一下。
在HTML5里，从Web网页上访问本地文件系统变的十分的简单，那就是使用File API。这个File规范说明里提供了一个API来表现Web应用里的文件对象，你可以通过编程来选择它们，访问它们的信息。这个File API包括： 一个FileList序列，代表着由本地系统里选中的单个的文件组成的数组。用来选择文件的用户接口可以通过<input type=”file”>调用实现。 一个Blob接口，它代表原始二进制数据，通过Blob对象你可以访问里面的字节数据。 一个File接口，它里面存有文件的只读属性信息，像文件名，文件类型，文件数据访问的地址。 一个FileReader接口，它提供了读取一个文件的方法，和一个获取文件读取结果的事件模型。 一个FileError接口和一个FileException对象，它们用来定义这个规范中的错误产生条件。 如何使用这个例子：在这个例子中，我给出了一个画板，你可以从本地文件系统里拖拽进去一个图片，或者你也可以用文件选择框来选择图片。例子中，请只选择图片文件，我并没有添加文件过滤和文件类型检查。请记住，没有一个浏览器完全实现了HTML5，这个例子需要在支持HTML5的浏览器上运行，比如Firefox3.5以上。
实现File API的主要方法非常的简单，就像下面：
function imagesSelected(myFiles) { for (var i = 0, f; f = myFiles[i]; i++) { var imageReader = new FileReader(); imageReader.onload = (function(aFile) { return function(e) { var span = document.createElement(‘span‘); span.innerHTML = ['<img class="images" src="', e.target.result,'" title="', aFile.name, '"/>'].join(”); document.getElementById(‘thumbs’).insertBefore(span, null); }; })(f); imageReader.readAsDataURL(f); } } function dropIt(e) { imagesSelected(e.dataTransfer.files); e.stopPropagation(); e.preventDefault(); }
选择在<td>上放置我的ondrop事件：
<td align=”left” height=”105″ ondragenter=”return false” ondragover=”return false” ondrop=”dropIt(event)”> <output id=”thumbs”></output> </td>
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
精品班
技术支持
技术咨询
学习群
会员优惠
返回顶部
0 
2
1147
收藏
![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
HTML5怎么访问本地文件？-PHP中文网问答-HTML5怎么访问本地文件？-PHP中文网问答
围观一下哦，学习一下。
在HTML5里，从Web网页上访问本地文件系统变的十分的简单，那就是使用File API。这个File规范说明里提供了一个API来表现Web应用里的文件对象，你可以通过编程来选择它们，访问它们的信息。这个File API包括：
一个FileList序列，代表着由本地系统里选中的单个的文件组成的数组。用来选择文件的用户接口可以通过<input type=”file”>调用实现。
一个Blob接口，它代表原始二进制数据，通过Blob对象你可以访问里面的字节数据。
一个File接口，它里面存有文件的只读属性信息，像文件名，文件类型，文件数据访问的地址。
一个FileReader接口，它提供了读取一个文件的方法，和一个获取文件读取结果的事件模型。
一个FileError接口和一个FileException对象，它们用来定义这个规范中的错误产生条件。
如何使用这个例子：在这个例子中，我给出了一个画板，你可以从本地文件系统里拖拽进去一个图片，或者你也可以用文件选择框来选择图片。例子中，请只选择图片文件，我并没有添加文件过滤和文件类型检查。请记住，没有一个浏览器完全实现了HTML5，这个例子需要在支持HTML5的浏览器上运行，比如Firefox3.5以上。
实现File API的主要方法非常的简单，就像下面：
function imagesSelected(myFiles) { for (var i = 0, f; f = myFiles[i]; i++) { var imageReader = new FileReader(); imageReader.onload = (function(aFile) { return function(e) { var span = document.createElement(‘span‘); span.innerHTML = ['<img class="images" src="', e.target.result,'" title="', aFile.name, '"/>'].join(”); document.getElementById(‘thumbs’).insertBefore(span, null); }; })(f); imageReader.readAsDataURL(f); } } function dropIt(e) { imagesSelected(e.dataTransfer.files); e.stopPropagation(); e.preventDefault(); }选择在<td>上放置我的ondrop事件：