JavaScript_javascript 스킬의 파일 업로드 API에 대한 자세한 설명

웹 프로그래머에게 웹 페이지에서 파일 업로드를 처리하는 것은 항상 귀찮은 일입니다. 과거에는 드래그 앤 드롭으로 이미지를 업로드할 수 없었고, 복잡한 Ajax 업로드 기술도 없었으며, 여러 파일을 일괄 업로드하는 경우도 거의 없었습니다. 또한 업로드가 완료된 후 서버에서 정보를 얻지 않으면 업로드 프로세스 중에 정보를 얻을 수 없습니다. 때로는 업로드를 마친 후 업로드한 파일이 부적절하다는 것을 발견하는 경우도 있습니다!

오늘날 HTML5의 혁명, 최신 브라우저의 탄생, JavaScript의 업그레이드로 인해 Javascript 및 input[type=file] 요소를 사용하여 파일 업로드 프로세스에 대한 정보를 얻을 수 있는 기능이 제공되었습니다.

파일 업로드 API를 어떻게 사용하는지 살펴보겠습니다!

업로드할 파일 목록 정보 접근

모든 입력[유형=파일]에서 업로드할 파일 목록을 가져오려면 파일 속성을 사용해야 합니다.

// Assuming <input type="file" id="upload" multiple>

var uploadInput = document.getElementById('upload');

uploadInput.addEventListener('change', function() {
 console.log(uploadInput.files) // File listing!
});

안타깝게도 이 FileList에는 forEach라는 메서드가 없으므로 FileList를 반복하려면 구식 루핑 기술만 사용할 수 있습니다.

for (var i = 0, fileCount = uploadInput.files.length; i < fileCount; i++) {
 console.log(files[i]);
}

매우 중요한 점은 FileList에 길이 속성이 있다는 것입니다.

업로드된 단일 파일에 대한 정보 가져오기

FileList의 각 파일 개체는 파일 크기, 파일 MIME 유형, 마지막 수정 시간, 파일 이름 등을 포함하여 파일에 대한 많은 양의 정보를 저장합니다.

{
 lastModified: 1428005315000,
 lastModifiedDate: Thu Apr 02 2015 15:08:35 GMT-0500 (CDT),
 name: "profile.pdf",
 size: 135568,
 type: "application/pdf",
 webkitRelativePath: ""
}

이 기본 정보의 가장 큰 용도는 파일을 업로드하기 전에 파일을 확인할 수 있다는 것입니다. 예를 들어 파일 형식과 크기를 확인할 수 있습니다.

var maxAllowedSize = 500000;

for (var i = 0, fileCount = uploadInput.files.length, totalSize = 0; i < fileCount; i++) {
 totalSize += files[i].size;
 if(totalSize > maxAllowedSize) {
 // Notify the user that their file(s) are too large
 }

 if(files[i].type != 'application/pdf') {
 // Notify of invalid file type for file in question
 }
}

사용자가 업로드한 파일의 크기가 너무 크거나 허용 범위를 초과하거나 업로드 유형이 잘못된 경우 사용자의 업로드를 차단한 다음 업로드할 수 없는 이유에 대해 필요한 메시지를 제공할 수 있습니다. 성공하세요.

위 내용은 파일 업로드 API에 대한 간략한 소개입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.