JavaScript에는 파일 객체가 있는데, 파일 객체는 파일 정보를 읽고 쓰는 데 사용됩니다. 이 객체는 Blob 객체를 상속하고 파일 시스템과 관련된 기능을 확장하는 모든 상황에서 사용할 수 있습니다. Blob 객체를 사용할 수 있습니다. "new File(fileParts, fileName, [options])" 생성자를 사용하여 파일 객체를 얻을 수 있습니다.
이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.
파일 객체
File 객체는 파일을 나타내며 파일 정보를 읽고 쓰는 데 사용됩니다. Blob 개체를 상속하거나 Blob 개체를 사용할 수 있는 모든 상황에서 사용할 수 있는 특수 Blob 개체입니다.
가장 일반적인 사용 사례는 양식의 파일 업로드 컨트롤()입니다. 사용자가 파일을 선택한 후 브라우저는 사용자가 선택한 각 파일을 포함하는 배열을 생성합니다. 이는 모두 File 인스턴스 개체입니다.
// HTML 코드는 다음과 같습니다. // <input id="fileItem" type="file">var file = document.getElementById('fileItem').files[0];file instanceof File // true위 코드에서 file은 사용자가 선택한 첫 번째 파일이며 File의 인스턴스입니다.
건설자
브라우저는 기본적으로 File() 생성자를 제공하여 File 인스턴스 객체를 생성합니다.
새 파일(배열, 이름 [, 옵션])
File() 생성자는 세 개의 매개변수를 허용합니다.
배열: 파일의 내용을 나타내는 이진 개체 또는 문자열이 구성원일 수 있는 배열입니다.
name: 파일 이름이나 파일 경로를 나타내는 문자열입니다.
옵션: 구성 개체, 인스턴스의 속성을 설정합니다. 이 매개변수는 선택사항입니다.
세 번째 매개변수는 개체를 구성하고 두 가지 속성을 설정할 수 있습니다.
유형: 문자열, 인스턴스 객체의 MIME 유형을 나타냅니다. 기본값은 빈 문자열입니다.
lastModified: 마지막으로 수정된 시간을 나타내는 타임스탬프, 기본값은 Date.now()입니다.
아래는 예시입니다.
var file = new File(['foo'], 'foo.txt', { 유형: 'text/plain', });인스턴스 속성 및 인스턴스 메서드
파일 객체에는 다음과 같은 인스턴스 속성이 있습니다.
File.lastModified: 마지막 수정 시간
File.name: 파일 이름 또는 파일 경로
File.size: 파일 크기(단위 바이트)
File.type: 파일의 MIME 유형
var myFile = new File([], 'file.bin', { lastModified: new Date(2018, 1, 1),});myFile.lastModified // 1517414400000myFile.name // "file.bin"myFile.size / / 0myFile.type // ""위 코드에서는 myFile의 내용이 비어 있고 MIME 유형이 설정되지 않았기 때문에 size 속성은 0이고 type 속성은 빈 문자열과 같습니다.
File 개체에는 자체 인스턴스 메서드가 없으므로 Blob 개체를 상속하므로 Blob 인스턴스 메서드인 Slice()를 사용할 수 있습니다.
지식을 넓히세요:
그것을 얻는 방법에는 두 가지가 있습니다.
새 파일(fileParts, 파일 이름, [옵션])
fileParts - Blob/BufferSource/String 유형 값의 배열입니다.
fileName - 파일 이름 문자열.
옵션 - 선택적 개체:
lastModified - 마지막 수정의 타임스탬프(정수 날짜)입니다.보다 일반적으로 <input type="file">에서 파일을 가져오거나 드래그 앤 드롭 또는 기타 브라우저 인터페이스를 사용합니다. 이 경우 파일은 운영 체제(OS)에서 이 정보를 가져옵니다.
File은 Blob에서 상속되므로 File 객체는 다음과 같은 속성을 갖습니다.
name - 파일 이름, lastModified - 마지막 수정의 타임스탬프입니다.이것이 <input type="file">에서 File 객체를 얻는 방법입니다:
<input type="file" onchange="showFile(this)"><script>function showFile(input) { let file = input.files[0]; Alert(`파일 이름: ${file.name}`); // 예를 들어 my.png 경고(`마지막 수정: ${file.lastModified}`) // 예를 들어 1552830408824}</script> 세부: 
참고:
입력은 여러 파일을 선택할 수 있으므로 input.files는 배열과 유사한 객체입니다. 여기에는 파일이 하나만 있으므로 input.files[0]만 사용합니다.