HTML5 파일 인터페이스를 사용하여 웹 페이지에서 파일 다운로드를 사용하는 방법

이 글은 HTML5 파일 인터페이스를 사용하여 웹 페이지에서 파일을 다운로드하는 방법을 주로 소개합니다. 이제 특정 참조 가치가 있으므로 필요한 친구가 참조할 수 있습니다.

파일 인터페이스는 파일 관련 정보를 제공합니다. 을 클릭하고 웹페이지에서 JavaScript를 실행하여 파일의 콘텐츠에 액세스합니다. 다음으로 이 글에서는 웹 페이지에서 파일 다운로드 기능을 사용하기 위한 HTML5 파일 인터페이스에 대해 소개하겠습니다. 필요한 친구들은 참고할 수 있습니다.

파일 인터페이스는 파일과 관련된 정보를 제공하고 웹 페이지에서 JavaScript를 실행합니다. 파일의 내용에 액세스합니다.

파일 개체는 파일을 선택하기 위해 입력 태그를 사용하여 사용자가 반환한 FileList 개체와 드래그 앤 드롭 작업의 DataTransfer 개체에서 가져옵니다. File 객체는 Blob을 사용할 수 있는 모든 컨텍스트에서 사용할 수 있는 특별한 유형의 Blob입니다.

웹 페이지에서 파일을 사용하기 위해 일반적으로 관련된 개체는 File 개체, FileList 개체 및 FileReader 개체입니다.

FileList 객체

FileList는 두 곳, 즉 입력 요소의 files 속성과 드래그 앤 드롭 API에서 나옵니다(파일을 드래그할 때 event.DataTransfer.files는 FileList 객체입니다)

<input id="fileItem" type="file">
var fileList = document.getElementById(&#39;fileItem&#39;).files

FileList 객체의 표준 속성

length: 읽기 전용 속성입니다. 이 속성은 FileList 객체에 포함된 File 객체의 길이를 반환합니다.

FileList 객체의 표준 메소드

item(index): FileList 객체의 지정된 위치에 있는 File 객체를 가져옵니다. 배열 인덱스 형식으로 축약할 수 있습니다.

File object

FileList 개체의 모든 항목은 File 개체입니다. 파일 객체는 특별한 종류의 Blob입니다.

파일 객체의 표준 속성

1.lastModified: 파일이 수정된 시간을 반환합니다. 이 시간은 1970년 1월 1일 0:00:00 이후 경과한 밀리초 수입니다. 읽기 전용 속성입니다

2.name: 파일 객체가 참조하는 파일의 파일 이름을 반환합니다. 읽기 전용 속성입니다.

3.type: 파일이 참조하는 파일의 파일 형식을 반환합니다. MINE 유형입니다. 읽기 전용 속성입니다.

4.size: 파일 객체가 참조하는 파일의 파일 크기를 반환합니다. 이는 읽기 전용 속성입니다.

File 객체의 표준 메소드

File 객체에는 별도의 메소드가 정의되어 있지 않지만 Blob 객체에서 상속받은 메소드가 있습니다.

FileReader 개체

FileReader 개체를 사용하면 웹 응용 프로그램이 사용자 컴퓨터의 파일을 비동기적으로 읽을 수 있습니다.

FileReader()는 새로운 FileReader 객체를 생성할 수 있는 생성자입니다.

var fileReader = new FileReader();

FileReader 개체의 표준 속성

1.error: 파일을 읽는 동안 발생한 오류를 반환합니다.

2.result: 파일의 내용을 반환하며, 반환 값 유형은 String 또는 ArrayBuffer입니다. 이 속성은 읽기 작업이 완료된 후에만 유효합니다.

3.readyState: 읽기 작업의 현재 상태를 반환합니다. 가능한 값은 0: 읽기가 시작되지 않음, 1: 읽기, 2: 읽기 완료입니다.

FileReader 객체의 표준 메서드

1.abort(): 읽기 작업을 중단합니다. ReadyState의 값은 2가 됩니다.

2.readAsArrayBuffer(Blob): File 객체와 같은 지정된 Blob을 읽습니다(File 객체는 특수 Blob입니다). 읽기가 완료되면 ReadyState 속성의 값은 2가 되고, result 속성은 파일 데이터를 나타내는 ArrayBuffer가 됩니다.

3.readAsDataURL(Blob): File 객체와 같은 지정된 Blob을 읽습니다(File 객체는 특수 Blob입니다). 읽기가 완료되면 ReadyState 속성의 값은 2가 됩니다. result 속성은 파일 데이터를 나타내는 URL이고, 데이터 형식은 base64로 인코딩된 문자열

<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();
  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);
  if (file) {
    reader.readAsDataURL(file);
  }
}

4.readAsText( Boob, 인코딩): File 객체와 같은 지정된 Blob을 읽습니다(File 객체는 특수 Blob입니다). 읽기가 완료되면 ReadyState 속성의 값은 2가 되고, result 속성은 파일 데이터를 나타내는 텍스트 문자열이 됩니다. 두 번째 매개변수는 선택사항이며 결과 속성에서 텍스트 문자열의 인코딩을 지정하는 데 사용됩니다. 기본값은 UTF-8입니다.

FileReader 개체 이벤트

1.abort: 읽기 작업이 종료되면 트리거됩니다.

2.error: 읽기 작업 중에 오류가 발생하면 트리거됩니다.

3.load: 읽기 작업이 성공적으로 완료되면 트리거됩니다.

4.loadend: 읽기 작업이 끝나면 트리거됩니다. 읽기 성공 또는 읽기 실패일 수 없습니다.

5.loadStart: 읽기 작업이 시작될 때 트리거됩니다.

6.process: 읽는 동안 트리거됩니다.

웹 애플리케이션에서 파일 사용

HTML5의 파일 개체를 사용하면 선택한 로컬 파일에 액세스하고 해당 파일의 내용을 읽을 수 있습니다. 파일 개체는 입력 요소 또는 끌어서 놓기 인터페이스에서 가져옵니다.

通过input元素选择文件

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

访问通过input选择的文件

var selectedFile = document.getElementById('input').files[0];

上述代码段一次只能选择一个文件，如果一次要选择多个文件，就需要给input元素添加一个multiple属性，并将multiple属性设置我true。在Gecko 1.9.2之前不支持一次选择多个文件。

通过drag and drop接口选择文件

关于drag and drop接口可以查看HTML5 DragEvent。

第一步：创建一个放置区域。一个普通的元素，如p，p等。

第二步：给放置区添加drop，dragenter，dragover事件处理程序。其中起关键作用的是drop事件处理程序。

下面是一个显示缩略图的例子：

<p id=&#39;dropbox&#39; class=&#39;dropbox&#39;></p>
.dropbox{
 border:solid 3px red;
 height:400px;
 width:auto;      
}

var dropbox;
dropbox = document.getElementById("dropbox");
//注册事件处理程序
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}
function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}
function drop(e) {
  e.stopPropagation();
  e.preventDefault();
  var dt = e.dataTransfer;
  var files = dt.files;
  handleFiles(files);
}
function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /^image\//;
    if (!imageType.test(file.type)) {
      continue;
    }
    var img = document.createElement("img");
    img.file = file;
    dropBox.appendChild(img); 
    var reader = new FileReader();
    reader.onload =  function() {
        img.src = reader.result; 
        };
    reader.readAsDataURL(file);
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

HTML5中postMessage API的基本使用

如何用HTML5操作WebSQL数据库

HTML5和jQuery实现搜索智能匹配的功能

위 내용은 HTML5 파일 인터페이스를 사용하여 웹 페이지에서 파일 다운로드를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!