zoukankan      html  css  js  c++  java
  • HTML 5 File API应用实例

            在HTML 5里,从Web网页上访问本地文件系统变的十分的简单,那就是使用File API。这个File规范说明里提供了一个API来表现Web应用里的文件对象,你可以通过编程来选择它们,访问它们的信息。
         在HTML 5里,从Web网页上访问本地文件系统变的十分的简单,那就是使用File API。这个File规范说明里提供了一个API来表现Web应用里的文件对象,你可以通过编程来选择它们,访问它们的信息。这个File API包括:
        ◆一个FileList序列,代表着由本地系统里选中的单个的文件组成的数组。用来选择文件的用户接口可以通过<input type=”file”>调用实现。
        ◆一个Blob接口,它代表原始二进制数据,通过Blob对象你可以访问里面的字节数据。
        ◆一个File接口,它里面存有文件的只读属性信息,像文件名,文件类型,文件数据访问的地址。
        ◆一个FileReader接口,它提供了读取一个文件的方法,和一个获取文件读取结果的事件模型。
      ◆一个FileError接口和一个FileException对象,它们用来定义这个规范中的错误产生条件。
                如 何使用这个例子:在这个例子中,给出了一个画板,你可以从本地文件系统里拖拽进去一个图片,或者你也可以用文件选择框来选择图片。例子中,请只选择图片文 件,请注意,该例子中并没有添加文件过滤和文件类型检查。请记住,没有一个浏览器完全实现了HTML 5,这个例子需要在支持HTML 5的浏览器上运行,比如Firefox3.5以上。
        下面就是这个例子 (拖拽一个图片到画板里):



                实现File API的主要方法非常的简单,就像下面:    
      • function imagesSelected(myFiles) {
      •   for (var i = 0, f; f = myFiles; 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>
      这个例子只是演示了拖拽本地文件到画板里,主要是想展示出HTML 5 File API简单但又强大的能力。
  • 相关阅读:
    记录百度编辑器bug(在编辑框输入光标到达页面最底部时,功能区块会悬浮在页面最顶部并且与编辑框分离)
    ThinkPHP5实用的数据库操作方法
    Windows10专业工作站版激活方法
    ThinkPHP5验证码不显示的原因及解决方法
    PHPExcel导出工作蒲(多表合并)教程+详细代码解读
    将input file的选择的文件清空的两种解决方案
    微信公众号网页开发——阻止微信客户端内点击任何图片自动放大
    开发中能快速定位错误也是技术的表现,附上【Chrome开发者工具官方中文文档】
    thinkPHP5 报错session_start(): No session id returned by function解决方法
    Linux安装PHPRedis扩展
  • 原文地址:https://www.cnblogs.com/ctriphire/p/2922274.html
Copyright © 2011-2022 走看看