HTML5 文件API
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的更多相关文章
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- HTML5 文件API(一)
1.FileList对象与File对象 2.文件API之Bolb对象 A Blob object represents a file-like object of immutable, raw dat ...
- HTML5文件API之FileReader
在文件上传之前,我们总想预览一下文件内容,或图片样子,html5 中FileReader正好提供了2种方法,可以在不上传文件的情况下,预览文件内容. 图片预览:readAsDataURL(file); ...
- HTML5文件API
File对象与File对象 Blob对象 FileReader对象 File对象 <!DOCTYPE html> <html> <head> <meta ht ...
- HTML5 文件API(二)
1.FileSystem概述及浏览器检 2.申请磁盘配额 3.创建文件
- Resumable.js – 基于 HTML5 File API 的文件上传
Resumable.js 是一个 JavaScript 库,通过 HTML5 文件 API 提供,稳定和可恢复的批量上传功能.在上传大文件的时候通过每个文件分割成小块,每块在上传失败的时候,上传会不断 ...
- HTML5权威指南--标签新变化,文件API,拖放API(简要学习笔记一)
1.标签元素更加语义化 2.内容类型仍然为“text/html” 扩展符仍然为html或者htm. <1>DOCTYPE 声明<!DOCTYPE html>就可 ...
- HTML5 File API — 让前端操作文件变的可能
前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...
- HTML5 file api读取文件的MD5码工具
1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆 ...
随机推荐
- GAN初步——本质上就是在做优化,对于生成器传给辨别器的生成图片,生成器希望辨别器打上标签 1,体现在loss上!
from:https://www.sohu.com/a/159976204_717210 GAN 从 2014 年诞生以来发展的是相当火热,比较著名的 GAN 的应用有 Pix2Pix.CycleGA ...
- Linux随笔---tar命令
一.解压 语法:tar [主选项+辅选项] 文件或者目录 使用该命令时,主选项是必须要有的,它告诉tar要做什么事情,辅选项是辅助使用的,可以选用. 主选项:c:create:v:verbose: ...
- LeetCode Container With Most Water (Two Pointers)
题意 Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai ...
- linux之grep 基础
第一章 -a 将binary文件以text文件的方式搜寻数据-c 只输出匹配行的计数,计算找到匹配的次数-I(大写i) 不区分大小写(只适合用于单字符)-h 查询多文件时不显示 ...
- HTTP协议图--概述
1.计算机网络体系结构分层 2.TCP/IP 通信传输流 利用 TCP/IP 协议族进行网络通信时,会通过分层顺序与对方进行通信.发送端从应用层往下走,接收端则从链路层往上走.如下: 3.TCP/ ...
- python 游戏(猜单词Hangman)
1.游戏思路和流程图 实现功能:随机一个单词让玩家猜测(后续难度实现修改为成语填空,成语必须要有提示,可修改猜的次数,增加连续猜成语,难度系数随着次数的增加而增加) 游戏流程图 2. 单词库和模块 i ...
- team330团队铁大兼职网站使用说明
项目名称:铁大兼职网站 项目形式:网站 网站链接:http://39.106.30.16:8080/zhaopinweb/mainpage.jsp 开发团队:team330 网站上线时间:2018年1 ...
- Visual studio 2013 安装的漫长过程
本周有一个任务是安装VS 2013版本,下载了安装包,七点多G,oh my god!!! 图上维持了两三个小时,可能我电脑台low了..... 因为是win7系统,需要进行重启电脑. 安装成功之后. ...
- 101空降师506团2营E连全体成员
吕天一 https://coding.net/u/Richardlv http://www.cnblogs.com/Richardlv/ 李伟亮 https://coding.net/u/201304 ...
- 移动硬盘插到台式机,外接网卡无法连接wifi处理
在网上买了一个希捷500G的移动硬盘,避免供电不足,硬盘需要插到台式机后面,高高兴兴的通过USB连接了,发现硬盘可以用,然后打算网上查询是否正品,发现不能连接网络了,我是台式机,用360wifi作为无 ...