HTML로 로컬 파일을 읽는 방법

HTML에서는 파일 API를 통해 로컬 파일을 읽습니다. 단계는 다음과 같습니다. <input> 요소를 사용하여 파일 선택기를 만듭니다. 파일 선택기에 이벤트 리스너를 추가합니다. 이벤트 핸들러에서 FileReader 객체를 사용하여 파일을 읽습니다. 성공적으로 읽은 후 결과 속성에는 파일 내용이 포함되며 필요에 따라 처리될 수 있습니다.

HTML을 사용하여 로컬 파일을 읽는 방법

HTML에서 로컬 파일 읽기는 주로 File API를 사용하여 수행됩니다. 파일 API는 웹페이지가 사용자 장치에서 파일을 읽을 수 있도록 하는 JavaScript API 세트입니다.

필요한 단계:

1. <input> 요소를 사용하여 파일 선택기 만들기: <input> 元素创建文件选择器：

   <input type="file">

<input type="file">

2. 파일 선택기에 이벤트 리스너 추가:

3. <code class="javascript">const input = document.querySelector('input[type="file"]');
   input.addEventListener('change', handleFileSelect);</code>

   이벤트 핸들러에서 파일 읽기:

<code class="javascript">function handleFileSelect(event) {
  const files = event.target.files;
  const reader = new FileReader();
  reader.onload = function() {
    // 读取成功后，`result` 属性将包含文件的内容。
    const content = reader.result;

    // 对文件内容执行所需的处理。
  };
  reader.readAsText(files[0]);
}</code>

샘플 코드:

<code class="html"><form>
  <input type="file" id="file-input">
  <button type="submit">读取文件</button>
</form>

<script>
  const input = document.querySelector('input[type="file"]');

  input.addEventListener('change', function(event) {
    const files = event.target.files;
    const reader = new FileReader();

    reader.onload = function() {
      const content = reader.result;

      console.log(content);
    };

    reader.readAsText(files[0]);
  });
</script></code>

• 파일 API는 HTML5 브라우저에서만 작동합니다.
• 로컬 파일을 읽으려면 사용자의 명시적인 승인이 필요합니다.
• 브라우저에는 파일 크기와 유형에 대한 특정 제한이 있습니다.

파일 API는 보안 위험을 초래할 수 있으므로 주의해서 사용하세요. 🎜🎜

위 내용은 HTML로 로컬 파일을 읽는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!