중단점 재개를 구현하기 위한 HTML5 파일 API에 대한 자세한 소개

현재 시중에 나와 있는 대부분의 웹사이트에서는 중단점 업로드를 위해 브라우저 플러그인 설치가 필요합니다. 이 글은 HTML5 파일 api를 통해 고급 브라우저 환경을 대상으로 합니다. 설명을 위한 중단점 업로드 구현

1. 다중 파일 선택 구현

HTML5의 d5fd7aea971a85678ba271703566ebfd에는 여러 값을 허용할 수 있는 "multiple" 속성이 추가되었습니다. 필드

<input type="file" multiple="multiple" name="file" id="file">

이 속성을 추가하면 사용자는 팝업 대화 상자에서 여러 파일을 한 번에 선택할 수 있습니다.

2. 컴퓨터에서 파일 드래그 웹페이지로 드래그하여 파일 추가 대기열 기능

여기서는 드래그오버 및 드롭 이벤트를 사용하여 파일 드래그 기능을 관리합니다

드래오버는 지정된 요소에서 이동할 때 이벤트를 처리하는 데 사용됩니다. 여기서는 드래그오버 시간을 바인딩합니다.

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);
}

3. 파일 재개 원칙

현재 파일 전송을 재개하는 데 일반적으로 사용되는 두 가지 방법이 있습니다. 하나는 웹소켓 인터페이스를 통해 파일을 전송하는 것입니다. 두 가지 방법 모두 장점이 있습니다. 다른 프로토콜을 사용하는 것을 제외하면 websocket이 더 고급스러워 보이지만 다른 알고리즘은 기본적으로 매우 유사하며 여기서는 비교적 편리한 ajax를 사용하여 아이디어를 설명합니다. 중단점 업로드.

결국 이력서 업로드의 핵심 내용은 파일을 "슬라이스"한 후 하나씩 서버에 전송하는 것입니다. 그러나 이 단순해 보이는 업로드 프로세스에는 수많은 함정이 있습니다.

첫 번째는 파일을 여러 부분으로 나눈 후 서버에 잘라낸 조각 수를 알려주는 방법, 업로드한 파일을 서버에서 최종적으로 병합하는 방법 등이 모두 필요합니다. 고려됩니다.

따라서 파일 업로드가 시작되기 전에 서버와 "핸드쉐이크" 과정을 거쳐 서버에 파일 정보를 알려준 다음 슬라이스 크기에 도달한 후 서버와 동의해야 합니다. 서버와 합의하면 후속 파일 전송을 시작할 수 있습니다.

프런트 엔드는 각 파일 조각을 백엔드로 전달해야 하며, 이후 중단점을 위해 프런트 엔드와 백엔드를 표시해야 합니다.

파일 전송이 중단되면 사용자는 파일을 다시 선택하고 로고를 사용하여 파일의 일부가 업로드되었는지 확인할 수 있으며, 그렇다면 마지막에 따라 파일을 계속 업로드할 수 있습니다. 업로드 재개 기능을 달성하기 위해 진행됩니다.

4. 파일 프론트엔드 슬라이싱

HTML5 File API를 사용하면 파일 자르기가 생각보다 훨씬 간단합니다.

그냥 슬라이스 방식을 사용하세요

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

• 
  

파라미터 start는 슬라이스가 시작되는 위치이고, end는 슬라이스가 끝나는 위치입니다. 단위는 모두 바이트입니다. 시작과 끝을 제어하면

file.slice(0,1000);
file.slice(1000,2000);
file.slice(2000,3000);
// ......

와 같은 파일 분할

이 가능합니다. 5. 파일 조각 업로드

이전 부분에서는 다음을 사용하여 파일을 조각으로 나누었습니다. 슬라이스 방법 여러 조각 중 다음으로 해야 할 일은 이러한 조각을 서버로 전송하는 것입니다.

여기에서는 ajax의 post 요청을 사용하여

textpop-up

rrree

• 
  

위 내용은 중단점 재개를 구현하기 위한 HTML5 파일 API에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!