filelist 表示文件对象的列表。

<form name="upload">
<input type="file" name="fileselect" multiple>
</form>
document.forms['upload']['fileselect'].files

得到的就是filelist。

拖放方式选择文件: drag  drop

监听drop事件,dragOver事件

用拖放的方式选择文件,files 存放在 event.dataTransfer.files 里面。

用选择的放是选择文件,flies 存放在 event.target.files 里面。

文件URL:  为文件创建地址用 creatreObjectURL 方法,创建的是bolb类型地址。每次都会生成不同的地址。

var file = document.forms['upload']['fileselect'].files[0];
var url = window.URL.createObjectURL(file);

吊销地址:

window.URL.revokeObjectURL(url);

HTML5 文件API的更多相关文章

  1. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  2. HTML5 文件API(一)

    1.FileList对象与File对象 2.文件API之Bolb对象 A Blob object represents a file-like object of immutable, raw dat ...

  3. HTML5文件API之FileReader

    在文件上传之前,我们总想预览一下文件内容,或图片样子,html5 中FileReader正好提供了2种方法,可以在不上传文件的情况下,预览文件内容. 图片预览:readAsDataURL(file); ...

  4. HTML5文件API

    File对象与File对象 Blob对象 FileReader对象 File对象 <!DOCTYPE html> <html> <head> <meta ht ...

  5. HTML5 文件API(二)

    1.FileSystem概述及浏览器检 2.申请磁盘配额 3.创建文件

  6. Resumable.js – 基于 HTML5 File API 的文件上传

    Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...

  7. HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)

    1.标签元素更加语义化   2.内容类型仍然为“text/html”    扩展符仍然为html或者htm.    <1>DOCTYPE 声明<!DOCTYPE html>就可 ...

  8. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  9. HTML5 file api读取文件的MD5码工具

    1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆 ...

随机推荐

  1. 2、Docker镜像和镜像管理

    一.镜像介绍 1.定义 一个只读层被称为镜像,一个镜像是永久不会变的. 由于 Docker 使用一个统一文件系统,Docker 进程认为整个文件系统是以读写方式挂载的. 但是所有的变更都发生顶层的可写 ...

  2. python3 subprocess模块

    当我们在执行python程序的时候想要执行系统shell可以使用subprocess,这时可以新起一个进程来执行系统的shell命令,python3常用的有subprocess.run()和subpr ...

  3. MOSFET的小信号模型和频率响应

    这部分内容大部分参考W.Y.Choi的课堂讲义第三讲和第四讲:http://tera.yonsei.ac.kr/class/2007_1/main.htm 一.小信号模型 首先要明确一点,大部分情形M ...

  4. 现代OpenGL渲染管线介绍

    原文摘选自 现代OpenGL渲染管线介绍 此文对最新的OpenGL做一个简单的介绍,如有理解错误,敬请指正.英文原文: https://glumpy.github.io/modern-gl.html ...

  5. 部署jar项目常用命令

      netstat -tunlp | grep  ××   查询出端口为××在运行应用的线程ip   kill -9  ××     关闭线程ip 为 ××的应用   rm  -f  ××.jar  ...

  6. MySQL数据库--外键约束及外键使用

    什么是主键.外键关系型数据库中的一条记录中有若干个属性,若其中某一个属性组(注意是组)能唯一标识一条记录,该属性组就可以成为一个主键. 比如: 学生表(学号,姓名,性别,班级) 其中每个学生的学号是唯 ...

  7. 20135234mqy-——信息安全系统设计基础第十四周学习总结

    第九章 虚拟存储器 主要作用: 将主存看作是一个存储在磁盘上的地址空间的高速缓存,在主存中只保护活动的区域,并根据需要在磁盘和主存之间来回传送数据: 为每个进程提供了一致的地址空间,从而简化了存储器管 ...

  8. Android TextView中图文混排设置行间距导致高度不一致问题解决

    最近项目中需要实现一个评论带表情的功能,刚开始一切顺利,非常easy,突然有一天发现文字跟表情混排的时候,TextView中图文高度不一致,excuse...什么鬼,之前明明测试过图文混排,不存在这个 ...

  9. bzip2 以及 tar 压缩/解压缩/.打包等工具软件

    1. bzip2 命令 基础格式: bzip2 [Options] file1 file2 file3 指令选项:(默认功能为压缩) -c //将输出写至标准输出 -d //进行解压操作 -v //输 ...

  10. Laravel 从入门到精通系列教程

    转载;https://laravelacademy.org/laravel-tutorial-5_7 适用于 Laravel 5.5.5.6.5.7 版本,本系列教程将围绕一个 LTS 版本,然后采取 ...