Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developer.mozilla.org/ko/docs/Web/API/FileList below:

FileList - Web API | MDN

Baseline Widely available

FileList 유형의 객체는 HTML <input> 요소의 files 속성이나 Drag and Drop API의 DataTransfer에서 가져올 수 있으며, <input type="file"> 요소로 선택했거나 웹 콘텐츠 위에 끌어다 놓은 파일 목록에 대한 접근을 제공합니다.

모든 <input> 요소 노드에는 FileList를 반환하는 files 특성이 있어서 파일의 목록에 접근할 수 있습니다. 예를 들어, 다음과 같은 HTML 코드를 가정하면,

<input id="fileItem" type="file" />

아래 코드로 노드의 파일 리스트에서 첫 번째 항목을 File 객체로 가져올 수 있습니다.

const file = document.getElementById("fileItem").files[0];

length읽기 전용

리스트가 포함한 파일의 수를 나타내는 읽기 전용 값입니다.

item()읽기 전용

파일 리스트에서 지정한 인덱스에 위치한 파일을 나타내는 File 객체를 반환합니다.

이 예제에서는 사용자가 선택한 파일들의 이름을 기록합니다.

<!--'multiple'을 지정해서 여러 파일의 선택을 허용-->
<input id="myfiles" multiple type="file" />
<div class="output"></div>

.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}

const output = document.querySelector(".output");
const myFiles = document.querySelector("#myfiles");

function logFilenames() {
  const fileInput = document.querySelector("#myfiles");
  const files = fileInput.files;
  const fileListLength = files.length;
  for (let i = 0; i < fileListLength; i++) {
    output.innerText = `${output.innerText}\n${files.item(i).name}`;
  }
}

myFiles.addEventListener("change", logFilenames);

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4