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. GAN初步——本质上就是在做优化,对于生成器传给辨别器的生成图片,生成器希望辨别器打上标签 1,体现在loss上!

    from:https://www.sohu.com/a/159976204_717210 GAN 从 2014 年诞生以来发展的是相当火热,比较著名的 GAN 的应用有 Pix2Pix.CycleGA ...

  2. Linux随笔---tar命令

    一.解压 语法:tar  [主选项+辅选项]  文件或者目录 使用该命令时,主选项是必须要有的,它告诉tar要做什么事情,辅选项是辅助使用的,可以选用. 主选项:c:create:v:verbose: ...

  3. LeetCode Container With Most Water (Two Pointers)

    题意 Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai ...

  4. linux之grep 基础

    第一章 -a    将binary文件以text文件的方式搜寻数据-c    只输出匹配行的计数,计算找到匹配的次数-I(大写i)    不区分大小写(只适合用于单字符)-h    查询多文件时不显示 ...

  5. HTTP协议图--概述

    1.计算机网络体系结构分层 2.TCP/IP 通信传输流 利用 TCP/IP 协议族进行网络通信时,会通过分层顺序与对方进行通信.发送端从应用层往下走,接收端则从链路层往上走.如下:   3.TCP/ ...

  6. python 游戏(猜单词Hangman)

    1.游戏思路和流程图 实现功能:随机一个单词让玩家猜测(后续难度实现修改为成语填空,成语必须要有提示,可修改猜的次数,增加连续猜成语,难度系数随着次数的增加而增加) 游戏流程图 2. 单词库和模块 i ...

  7. team330团队铁大兼职网站使用说明

    项目名称:铁大兼职网站 项目形式:网站 网站链接:http://39.106.30.16:8080/zhaopinweb/mainpage.jsp 开发团队:team330 网站上线时间:2018年1 ...

  8. Visual studio 2013 安装的漫长过程

    本周有一个任务是安装VS 2013版本,下载了安装包,七点多G,oh my god!!! 图上维持了两三个小时,可能我电脑台low了..... 因为是win7系统,需要进行重启电脑. 安装成功之后. ...

  9. 101空降师506团2营E连全体成员

    吕天一 https://coding.net/u/Richardlv http://www.cnblogs.com/Richardlv/ 李伟亮 https://coding.net/u/201304 ...

  10. 移动硬盘插到台式机,外接网卡无法连接wifi处理

    在网上买了一个希捷500G的移动硬盘,避免供电不足,硬盘需要插到台式机后面,高高兴兴的通过USB连接了,发现硬盘可以用,然后打算网上查询是否正品,发现不能连接网络了,我是台式机,用360wifi作为无 ...