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. 蒙特卡罗方法 python 实现2

    如果不考虑作图,这里的两个例子可以改写成下面的样子: 求圆周率 import random ''' 蒙特卡罗模拟 投点法计算圆周率 ''' # 投点游戏 def play_game(): # 圆 r ...

  2. HTML基础之JS

    HTML中的三把利器的JS 又称为JavaScript,看着好像和Java有点联系,实际上他和java半毛钱关系都没有,JavaScript和我们学习的Python.Go.Java.C++等,都是一种 ...

  3. CF1096G Lucky Tickets

    https://www.luogu.org/problemnew/show/CF1096G 显然dp出用\(\frac{n}{2}\)个数能拼出来的每个数的方案数,平方相加就行了,dp显然ntt+快速 ...

  4. cocos2d-x学习记录6——自定义Button

    cocos2d-x中封装CCMenuItem等相关按钮,但是有些时候需要自己封装按钮,这样能够更加灵活的实现对应功能. 自定义Button,需要重写OnEnter()和onExit()函数,并在对应函 ...

  5. 使用 idea 的Bookmarks(书签)功能

    https://blog.csdn.net/qq_36376059/article/details/80277767

  6. Linux下设置和查看环境变量

    Linux的变量种类 按变量的生存周期来划分,Linux变量可分为两类: 1 永久的:需要修改配置文件,变量永久生效. 2 临时的:使用export命令声明即可,变量在关闭shell时失效. 设置变量 ...

  7. win10+anaconda3+python3.6+opencv3.1.0

    最近用windows系统比较多,就想在win10下搞一下深度学习这一方面的研究,那么就需要配置好环境巴拉巴拉的一堆东西.默默记个笔记,正所谓“好记性不如烂笔头”. 1.安装Anaconda 这个是一个 ...

  8. Java内存区域的划分和异常

    Java内存区域的划分和异常   运行时数据区域 JVM在运行Java程序时候会将内存划分为若干个不同的数据区域. 打开百度App,看更多美图 程序计数器 线程私有.可看作是当前线程所执行的字节码的行 ...

  9. k8s-rabbitmq-(一)集群部署

    K8S版本:1.10.1 rabbitmq版本:3.6.14 从来没用过这个软件,所以对里面很多术语看不太懂.最后通过https://www.kubernetes.org.cn/2629.html 大 ...

  10. 了不起的Node.js--之二

    安装模块 使用NPM包管理器可以让你轻松对模块进行管理,它会下载指定的包.解决包的依赖.进行测试脚本及安装命令行脚本. 安装二进制工具包 有的项目分发的是Node编写的命令行工具.这个时候,安装时要增 ...