H5에서 파일 중단점 이력서 업로드를 구현하는 방법

이번에는 H5에서 파일 중단점 전송 재개를 구현하는 방법과 H5에서 파일 중단점 전송을 재개하는 방법에 대한 주의사항이 무엇인지 보여드리겠습니다.

HTML5의 FILE API에는 BLOB객체를 분할할 수 있는 슬라이스 방법이 있습니다. 프론트 엔드는 FileList 객체를 통해 해당 파일을 얻고, 대용량 파일을 지정된 분할 방식에 따라 세그먼트로 나눈 후 이를 백엔드에 하나씩 전달하고, 백엔드는 파일을 하나씩 순서대로 이어붙입니다.

재개 가능한 업로드의 원칙

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

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

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

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

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

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

프런트엔드 파일 슬라이싱

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

슬라이스 방법을 사용하세요

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

매개변수 start는 슬라이스가 시작되는 위치이고, end는 슬라이스가 끝나는 위치입니다. 단위는 모두 바이트입니다. 시작과 끝을 제어하면 파일 분할을 달성할 수 있습니다.

예:

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

파일 조각 업로드

이전 부분에서는 슬라이스 방법을 통해 파일을 여러 청크로 나눴습니다. 이 조각을 서버로 전송하면 됩니다.

여기에서는 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 중국어 웹사이트의 다른 관련 기사에 주목하세요.

추천 도서:

H5의 저장 방법에 대한 자세한 설명,

H5에서 제약 조건 확인 API를 사용하는 방법

위 내용은 H5에서 파일 중단점 이력서 업로드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!