html5 file api 续传,HTML5 File api 实现断点续传

目前市场上大多数的网站的断点上传都是需要安装浏览器插件的，本文就针对高级浏览器的环境下，通过HTML5 File api实现断点上传进行说明

一、实现文件多选

HTML5的新增了"multiple"属性，该属性可接受多个值的文件上传字段

添加了该属性用户就可以在弹出的对话框中一次性选择多个文件了

二、实现文件从计算机拖拽到网页以及添加文件队列功能

这里我们用 dragover 和 drop 两个事件来管理文件拖拽的功能

其中 dragover 用来处理在指定的元素上移动时的事件，这里我们通过给body绑定dragover时间来处理页面中拖动文件的事件

document.body.addEventListener('dragover', dragFile, false);

function dragFile(evt) {

evt.stopPropagation();

evt.preventDefault();

evt.dataTransfer.dropEffect = 'copy';

}

用 drop 事件来处理鼠标松开时候的事件，此时应该将用户拖动过来的文件加入到上传队列中，以供后续的处理

document.body.addEventListener('drop', dropFile, false);

function dragFile(evt) {

evt.stopPropagation();

evt.preventDefault();

// dataTransfer.files属性可以获取到所有拖动选择的文件，通过遍历可以读取到所有文件的信息。

// 遍历每个文件可以获取到文件的 name、size、type、lastModifiedDate等关键信息

var files = evt.dataTransfer.files;

// addfile 方法 用来添加上传文件队列，在input的change事件中也需要调用

// 该方法首先检查有无文件正在上传中，如果有就将后续加入的文件放到上传队列中，如果没有文件正在上传就直接执行上传命令

addfile(files);

}

三、文件续传原理

目前比较常用的断点续传的方法有两种，一种是通过websocket接口进行文件上传，另一种是通过ajax，两种方法各有千秋，虽然websocket听起来比较高端些~ 但是除了用了不同的协议外其他的算法基本上都是很相似的，并且服务端要开启ws接口，这里用相对方便的ajax来说明断点上传的思路。

说来说去，断点续传最核心的内容就是把文件“切片”然后再一片一片的传给服务器，但是这看似简单的上传过程却有着无数的坑。

首先是文件的识别，一个文件被分成了若干份之后如何告诉服务器你切了多少块，以及最终服务器应该如何把你上传上去的文件进行合并，这都是要考虑的。

因此在文件开始上传之前，我们和服务器要有一个“握手”的过程，告诉服务器文件信息，然后和服务器约定切片的大小，当和服务器达成共识之后就可以开始后续的文件传输了。

前台要把每一块的文件传给后台，成功之后前端和后端都要标识一下，以便后续的断点。

当文件传输中断之后用户再次选择文件就可以通过标识来判断文件是否已经上传了一部分，如果是的话，那么我们可以接着上次的进度继续传文件，以达到续传的功能。

四、文件的前端切片

有了HTML5 的 File api之后切割文件比想想的要简单的多的多。

只要用slice 方法就可以了

var packet = file.slice(start, end);

参数start是开始切片的位置，end是切片结束的位置 单位都是字节。通过控制start和end 就可以是实现文件的分块

如

file.slice(0,1000);

file.slice(1000,2000);

file.slice(2000,3000);

// ......

五、文件片段的上传

上一部我们通过slice方法把文件分成了若干块，接下来要做的事情就是把这些碎片传到服务器上。

这里我们用ajax的post请求来实现

var xhr = new XMLHttpRequest();

var url = xxx // 文件上传的地址 可以包括文件的参数 如文件名称 分块数等以便后台处理

xhr.open('POST', url, true);

xhr.onload = function (e){

// 判断文件是否上传成功，如果成功继续上传下一块，如果失败重试该快

}

xhr.upload.onprogress = function(e){

// 选用 如果文件分块大小较大 可以通过该方法判断单片文件具体的上传进度

// e.loaded 该片文件上传了多少

// e.totalSize 该片文件的总共大小

}

xhr.send(packet);

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

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

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

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

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

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

HTML5 File API 全介绍

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

HTML5 File API的应用

HTML5 File API简介 HTML5File API协议族 Directories and System   文件系统和目录读取 FileWriter   写入文件 FileReader   ...

HTML5 file API加canvas实现图片前端JS压缩并上传

一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅 ...

HTML5 File API

1.File API 一直以来,不能直接访问用户计算机中的文件都是web应用开发当中的一大障碍.File API的宗旨是为web开发人员提供一种安全的方式,以便在客户端访问用户计算机中的文件,并更好的 ...

图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

一 . 背景及效果 当前互联网上传文件最多的就是图片文件了,但是传统web图片的截图上传需要:截图保存->选择路径->保存后再点击上传->选择路径->上传->插入. 图片 ...

HTML5 File API解读

1,概述 Web应用应该具备处理广泛用户输入问题的能力,例如在Web富应用中,用户希望上传文件到服务器.File API定义了访问文件的基本操作途径,包括文件.文件列表集.错误处理等,同时,File ...

随机推荐

ViewController respondsToSelector 错误的解决方法

原因解析:(来自别人博客分析)某个公共类或系统提供的控件,存在delegate方法,当创建此公共控件的容器类已经销毁,而这个控件对应的服务是在其它run loop中进行的,控件销毁或者需要进行状态通知 ...

HelloWorld Makefile Template

DEPDIR = build_dep TARGET_NAME = helloworld CFLAGS = -Wall SRCS = main.c SRCS += foo.c OBJS = $(SRCS ...

[转]Android How to Download and Make Volley.jar

原文来自:http://tips.androidhive.info/2015/08/android-how-to-download-and-make-volley-jar/   1 Comment . ...

android 11 模拟onclick 事件

package com.sxt.callback; public class Button { //预存一段按钮点击的响应代码 private OnclickListener mOnClickList ...

D - 二叉树遍历(推荐)

二叉树遍历问题 Description   Tree Recovery Little Valentine liked playing with binary trees very much. Her ...

Node.js之异步流控制

前言 在没有深度使用函数回调的经验的时候,去看这些内容还是有一点吃力的.由于Node.js独特的异步特性,才出现了"回调地狱"的问题,这篇文章中,我比较详细的记录了如何解决异步流问 ...

《团队-Oldnote-最终程序》

托管平台地址:https://github.com/Vcandoit/Notepad 小组名称:TOP 小组成员合照:待添加 程序运行方法:手机app,安装到手机点击即可运行,打开页面会有图标提示. ...

字符串格式化(七)-format

print("i am %s" %'admin') # i am admin msg = "i am %s" %'Alex' print(msg) # i am ...

POJ3186(KB12-O DP)

Treats for the Cows Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5801   Accepted: 30 ...

MySQL 分区表原理及数据备份转移实战

MySQL 分区表原理及数据备份转移实战 1.分区表含义 分区表定义指根据可以设置为任意大小的规则,跨文件系统分配单个表的多个部分.实际上,表的不同部分在不同的位置被存储为单独的表.用户所选择的.实现 ...