이력서 이전의 원칙은 무엇입니까? html5를 사용하여 중단점을 달성하고 파일 업로드를 재개하는 방법

伊谢尔伦
풀어 주다: 2017-05-30 10:36:32
원래의
1754명이 탐색했습니다.

HTML5的FILE api,有一个slice方法,可以将BLOB对象进行分割。前端通过FileList对象获取到相应的文件,按照指定的分割方式将大文件分段,然后一段一段地传给后端,后端再按顺序一段段将文件进行拼接。

断点续传原理

目前比较常用的断点续传的方法有两种,一种是通过websocket接口 a>进行文件上传, 다른 하나는 ajax를 통한 방법입니다. 두 가지 방법 모두 나름의 장점이 있지만 websocket 더 고급스러워 보이지만 다른 프로토콜을 사용하는 것을 제외하면 다른 알고리즘은 기본적으로 매우 유사하며 서버는 ws,另一种是通过ajax,两种方法各有千秋,虽然websocket听起来比较高端些,但是除了用了不同的协议外其他的算法基本上都是很相似的,并且服务端要开启ws接口,这里用相对方便的ajax来说明断点上传的思路。를 열어야 합니다. 여기서는 비교적 편리한 ajax를 사용하여 중단점 업로드 아이디어를 설명합니다.

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

첫 번째는 파일 식별입니다. 파일을 여러 부분으로 나눈 후 잘라낸 조각 수를 서버에 알리는 방법과 서버가 최종적으로 업로드해야 하는 방법입니다. file首先是文件的识别,一个文件被分成了若干份之后如何告诉服务器你切了多少块,以及最终服务器应该如何把你上传上去的文件进行合并,这都是要考虑的。 합병, 이것들은 모두 고려해야 할 사항입니다.

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

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

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

文件的前端切片

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

只要用slice 方法就可以了

p>
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);
로그인 후 복사

文件上传到后台后,后台程序如PHP会做出相应的处理。도착함 백그라운드 후에는 PHP와 같은 백그라운드 프로그램이 그에 따라 처리합니다.


위 내용은 이력서 이전의 원칙은 무엇입니까? html5를 사용하여 중단점을 달성하고 파일 업로드를 재개하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿