JavaScript 파일 API는 파일 업로드 Preview_javascript 기술을 구현합니다.
- WBOY원래의
- 2016-05-16 15:16:181174검색
1. 개요
과거에는 브라우저 기반 애플리케이션에서 로컬 파일에 액세스하는 것이 골치 아픈 일이었습니다. Web 2.0 응용 기술의 지속적인 발전으로 JavaScript가 점점 더 중요한 역할을 하고 있지만 보안 문제로 인해 JavaScript는 항상 로컬 파일에 액세스할 수 없었습니다. 따라서 브라우저에서 로컬 파일을 드래그하고 업로드하는 등의 기능을 구현하려면 특정 브라우저에서 제공하는 다양한 기술을 활용해야 합니다. 예를 들어 IE의 경우 로컬 파일에 액세스하려면 ActiveX 컨트롤을 사용해야 하고, Firefox의 경우 플러그인 개발도 사용해야 합니다. 다양한 브라우저의 기술적 구현이 다르기 때문에 프로그램이 여러 브라우저를 지원하려면 프로그램이 매우 복잡해지고 유지 관리가 어려워집니다. 하지만 이제 File API의 등장으로 이 모든 것이 완전히 바뀌었습니다.
파일 API는 표준 JavaScript API 세트 출시를 목표로 Mozilla가 W3C에 제출한 초안입니다. 기본 기능은 JavaScript로 로컬 파일을 작동하는 것입니다. 보안상의 이유로 이 API는 로컬 파일에 대한 제한된 액세스만 제공합니다. 이를 통해 순수 JavaScript를 사용하여 로컬 파일을 쉽게 읽고 업로드할 수 있습니다. 현재 FireFox 3.6은 이 기능을 지원하는 최초의 브라우저입니다. 또한 최신 버전의 Google Chrome 및 Safari 브라우저도 해당 지원을 제공합니다. 파일 API는 현재 W3C에서 개발 중인 향후 HTML 5 사양의 일부가 될 것으로 예상됩니다.
2. 파일 API 개요
파일 API는 JavaScript 개체 및 이벤트 집합으로 구성됩니다. 개발자에게 a3591f4ec2bfa0f98d6cbf5c84418209 파일 선택 컨트롤에서 선택한 파일을 조작할 수 있는 기능을 제공합니다. 그림 1은 File API의 모든 JavaScript의 조합 관계를 보여줍니다.
FileList 유형에는 File 객체 세트가 포함되어 있습니다. 일반적으로 FileList 개체는 양식의 파일 필드(7a282165fe11716a838bf671a5343150)에서 가져올 수 있습니다. Blob 객체는 브라우저가 읽을 수 있는 원시 바이너리 스트림 집합을 나타냅니다. Blob 객체에서 size 속성은 스트림의 크기를 나타냅니다. 함수 Slice()는 긴 Blob 객체를 작은 조각으로 분할할 수 있습니다. File 객체는 Blob 객체를 상속하고 File 관련 속성이 Blob 객체에 추가됩니다. 그 중 속성 이름은 파일 이름을 나타냅니다. 이 이름은 파일의 경로 정보를 제거하고 파일 이름만 유지합니다. type 속성은 파일의 MIME 유형을 나타냅니다. urn 속성은 이 파일의 URN 정보를 나타냅니다. 파일 읽기 작업을 완료하기 위해 FileReader 개체 인스턴스는 File 또는 Blob 개체와 연결되며 세 가지 파일 읽기 기능과 6가지 이벤트를 제공합니다.
파일 읽기 기능의 구체적인 내용:
readAsBinaryString() 파일 내용을 읽고, 읽은 결과는 바이너리 문자열입니다. 파일의 각 바이트는 [0..255] 범위의 정수로 표시됩니다. 이 함수는 File 객체를 매개변수로 받아들입니다.
readAsText() 파일 내용을 읽고, 읽은 결과는 파일 내용을 나타내는 텍스트 문자열입니다. 이 함수는 File 객체와 텍스트 인코딩 이름을 매개변수로 받아들입니다.
readAsDataURL 파일 내용을 읽고, 읽은 결과는 data: URL입니다. DataURL은 RFC2397에 의해 정의됩니다.
파일 읽기 이벤트의 구체적인 내용:
이벤트명 이벤트 설명
Onloadstart 파일 읽기가 시작되면 트리거됩니다.
진행 읽기가 진행 중일 때 정기적으로 트리거됩니다. 이벤트 매개변수에는 읽은 데이터의 총량이 포함됩니다.
중단 읽기가 중단되면 시작됩니다.
오류 읽기 오류가 발생할 때 발생합니다.
로드 읽기가 성공적으로 완료되면 트리거됩니다.
Loadend 성공, 실패에 관계없이 읽기가 완료되면 트리거됩니다.
3. 파일 API 간단한 예시
다음으로 간단한 예제를 사용하여 File API의 기본 사용법을 보여줍니다. 이 예제에는 두 개의 코드 파일이 포함되어 있습니다. index.html에는 웹 측의 HTML 코드가 포함되어 있고 업로드 처리를 위한 JavaScript 코드에는 업로드된 파일을 수신하기 위한 서버 측의 코드가 포함되어 있습니다. 첨부파일의 sourcecode.zip을 확인하시기 바랍니다. 이 예에서는 파일 선택 필드가 있는 기존 양식을 표시합니다. 사용자가 파일을 선택하고 제출을 클릭하면 File API를 사용하여 파일 내용을 읽고 XMLHttpRequest 객체를 통해 Ajax를 사용하여 파일을 서버에 업로드합니다. 그림 2는 실제 데모의 스크린샷을 보여줍니다.
코드를 단계별로 보여드리겠습니다. 목록 1은 코드의 HTML 부분을 보여줍니다.
목록 1 샘플 코드의 HTML 부분
<body> <h1>File API Demo</h1> <p> <!-- 用于文件上传的表单元素 --> <form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data" action="javascript: uploadAndSubmit();"> <p>Upload File: <input type="file" name="file" /></p> <p><input type="submit" value="Submit" /></p> </form> <div>Progessing (in Bytes): <span id="bytesRead"> </span> / <span id="bytesTotal"></span> </div> </p> </body>
보시다시피 일반적인 ff9c23ada1bcecdd1a0fb5d5a0f18437 태그를 사용하여 전통적인 0ac820164a0b3fea57ee8f01d9b5fa57 ff9c23ada1bcecdd1a0fb5d5a0f18437 안에 submit 요소도 있습니다. ff9c23ada1bcecdd1a0fb5d5a0f18437 외부에는 읽은 데이터 양과 총 데이터 양을 나타내는 45a2772a6b6107b401db3c9b82c049c2 요소가 있습니다. ff9c23ada1bcecdd1a0fb5d5a0f18437의 작업 속성은 JavaScript 함수 uploadAndSubmit()을 가리킵니다. 이 함수는 파일을 읽고 업로드하는 과정을 완료합니다. 함수 코드는 목록 2에 표시됩니다.
파일을 읽고 업로드하는 JavaScript 함수 2개 나열
function uploadAndSubmit() {
var form = document.forms["demoForm"];
if (form["file"].files.length > 0) {
// 寻找表单域中的 <input type="file" ... /> 标签
var file = form["file"].files[0];
// try sending
var reader = new FileReader();
reader.onloadstart = function() {
// 这个事件在读取开始时触发
console.log("onloadstart");
document.getElementById("bytesTotal").textContent = file.size;
}
reader.onprogress = function(p) {
// 这个事件在读取进行中定时触发
console.log("onprogress");
document.getElementById("bytesRead").textContent = p.loaded;
}
reader.onload = function() {
// 这个事件在读取成功结束后触发
console.log("load complete");
}
reader.onloadend = function() {
// 这个事件在读取结束后，无论成功或者失败都会触发
if (reader.error) {
console.log(reader.error);
} else {
document.getElementById("bytesRead").textContent = file.size;
// 构造 XMLHttpRequest 对象，发送文件 Binary 数据
var xhr = new XMLHttpRequest();
xhr.open(/* method */ "POST",
/* target url */ "upload.jsp?fileName=" + file.name
/*, async, default to true */);
xhr.overrideMimeType("application/octet-stream");
xhr.sendAsBinary(reader.result);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
console.log("upload complete");
console.log("response: " + xhr.responseText);
}
}
}
}
}
reader.readAsBinaryString(file);
} else {
alert ("Please choose a file.");
}
}
이 함수에서는 먼저 686cf11c17bbba1d5481bf0c9dbb6941을 포함하는 ff9c23ada1bcecdd1a0fb5d5a0f18437 요소를 찾고, 업로드된 파일 정보를 포함하는 d5fd7aea971a85678ba271703566ebfd d5fd7aea971a85678ba271703566ebfd 요소에 파일이 포함되어 있지 않으면 사용자가 파일을 선택하지 않았음을 의미하며 오류가 보고됩니다.
목록 3 d5fd7aea971a85678ba271703566ebfd 요소 찾기
var form = document.forms["demoForm"];
if (form["file"].files.length > 0)
{
var file = form["file"].files[0];
… …
}
else
{
alert ("Please choose a file.");
}
여기서 form[“file”].files에서 반환된 개체 유형은 언급된 FileList입니다. 우리는 그것으로부터 첫 번째 요소를 취합니다. 그런 다음 FileReader 개체를 빌드합니다.
var reader = new FileReader();
onloadstart 이벤트가 실행되면 읽은 총 데이터 양을 나타내는 페이지의 45a2772a6b6107b401db3c9b82c049c2 요소를 채웁니다. 목록 4 보기
목록 4 onloadstart 이벤트
reader.onloadstart = function()
{
console.log("onloadstart");
document.getElementById("bytesTotal").textContent = file.size;
}
在 onprogress 事件触发时，更新页面上已读取数据量的 <span> 元素。参见清单 5
진행중 이벤트 5개 목록
reader.onprogress = function(p) {
console.log("onloadstart");
document.getElementById("bytesRead").textContent = p.loaded;
}
최종 onloadend 이벤트에서는 오류가 없으면 파일 내용을 읽고 XMLHttpRequest를 통해 업로드합니다.
onloadend 이벤트 6개 나열
reader.onloadend = function()
{
if (reader.error)
{
console.log(reader.error);
}
else
{
// 构造 XMLHttpRequest 对象，发送文件 Binary 数据
var xhr = new XMLHttpRequest();
xhr.open(/* method */ "POST",
/* target url */ "upload.jsp?fileName=" + file.name
/*, async, default to true */);
xhr.overrideMimeType("application/octet-stream");
xhr.sendAsBinary(reader.result);
… …
}
}
File API의 사양에 따라 onloadend 이벤트 처리를 이벤트 오류 처리와 이벤트 로드 처리로 나눌 수도 있습니다.
이 예에서는 업로드를 처리하기 위해 백그라운드에서 JSP를 사용합니다. JSP 코드는 목록 7에 표시됩니다.
목록 7 업로드된 JSP 코드 처리
<%@ page import="java.io.*" %><%
BufferedInputStream fileIn = new
BufferedInputStream(request.getInputStream());
String fn = request.getParameter("fileName");
byte[] buf = new byte[1024];
//接收文件上传并保存到 d:\
File file = new File("d:/" + fn);
BufferedOutputStream fileOut = new BufferedOutputStream(new
FileOutputStream(file));
while (true) {
// 读取数据
int bytesIn = fileIn.read(buf, 0, 1024);
System.out.println(bytesIn);
if (bytesIn == -1)
{
break;
}
else
{
fileOut.write(buf, 0, bytesIn);
}
}
fileOut.flush();
fileOut.close();
out.print(file.getAbsolutePath());
%>
在这段 JSP 代码中，我们从 POST 请求中接受文件名字以及二进制数据。将二进制数据写入到服务器的“D:\”路径中。并返回文件的完整路径。以上代码可以在最新的 Firefox 3.6 中调试通过。
四、使用拖拽上传文件
前面我们介绍了怎样通过 HTML5 的 File API 来读取本地文件内容并上传到服务器，通过这种方式已经能够满足大部分用户的需求了。其中一个不足是用户只能通过点击“浏览”按钮来逐个添加文件，如果需要批量上传文件，会导致用户体验不是很友好。而在桌面应用中，用户一般可以通过鼠标拖拽的方式方便地上传文件。拖拽一直是 Web 应用的一个软肋，一般浏览器都不提供对拖拽的支持。虽然 Web 程序员可以通过鼠标的 mouseenter，mouseover 和 mouseout 等事件来实现拖拽效果，但是这种方式也只能使拖拽的范围局限在浏览器里面。一个好消息是 HTML5 里面不仅加入了 File API，而且加入了对拖拽的支持，Firefox 3.5 开始已经对 File API 和拖拽提供了支持。下面我们先简要介绍一下拖拽的使用，然后用一个例子来说明如何通过拖拽上传文件。
1、拖拽简介
拖拽一般涉及两个对象：拖拽源和拖拽目标。
拖拽源：在 HTML5 草案里如果一个对象可以作为源被拖拽，需要设置 draggable 属性为 true 来标识该对象可作为拖拽源。然后侦听源对象的 dragstart 事件，在事件处理函数里设置好 DataTransfer。在 DataTransfer 里可以设置拖拽数据的类型和值。比如是纯文本的值，可以设置类型为"text/plain"，url 则把类型设置为"text/uri-list"。 这样，目标对象就可以根据期望的类型来选择数据了。
拖拽目标：一个拖拽目标必须侦听 3 个事件。
dragenter：目标对象通过响应这个事件来确定是否接收拖拽。如果接收则需要取消这个事件，停止时间的继续传播。
dragover：通过响应这个事件来显示拖拽的提示效果。
drop：目标对象通过响应这个事件来处理拖拽数据。在下面的例子里我们将在 drop 事件的处理函数里获取 DataTransfer 对象，取出要上传的文件。
由于本文主要介绍 File API，对这部分不作详细解释，感兴趣的读者可以参考 HTML5 草案（见参考资料）。
2、拖拽上传文件实例
下面以一个较为具体的例子说明如何结合拖拽和 File API 来上传文档。由于直接和桌面交互，所以我们不需要处理拖拽源，直接在目标对象里从 DataTransfer 对象获取数据即可。
首先，我们需要创建一个目标容器用来接收拖拽事件，添加一个 div 元素即可。然后用一个列表来展示上传文件的缩略图，进度条及文件名。参见清单 8 的 HTML 代码和图 3 的效果图。详细代码请参见附件中的 dnd.html 文件。
清单 8 拖曳目标的 HTML 代码
<div id="container"> <span>Drag and drop files here to upload.</span> <ul id="fileList"></ul> </div>
拖拽目标创建好之后，我们需要侦听其对应的事件 dragenter，dragover 和 drop。在 dragenter 事件处理函数里，我们只是简单地清除文件列表，然后取消 dragenter 事件的传播，表示我们接收该事件。更加妥当的作法是判断 DataTransfer 里的数据是否为文件，这里我们假设所有拖拽源都是文件。dragover 事件里我们取消该事件，使用默认的拖拽显示效果。在 drop 事件里我们注册了 handleDrop 事件处理函数来获取文件信息并上传文件。清单 9 展示了这些事件处理函数。
清单 9 设置事件处理函数
function addDNDListeners()
{
var container = document.getElementById("container");
var fileList = document.getElementById("fileList");
// 拖拽进入目标对象时触发
container.addEventListener("dragenter", function(event)
{
fileList.innerHTML ='';
event.stopPropagation();
event.preventDefault();
}, false);
// 拖拽在目标对象上时触发
container.addEventListener("dragover", function(event)
{
event.stopPropagation();
event.preventDefault();
}, false);
// 拖拽结束时触发
container.addEventListener("drop", handleDrop, false);
}
window.addEventListener("load", addDNDListeners, false);
处理 drop 事件
用户在拖拽结束时松开鼠标触发 drop 事件。在 drop 事件里，我们可以通过 event 参数的 DataTransfer 对象获取 files 数据，通过遍历 files 数组可以获取每个文件的信息。然后针对每个文件，创建 HTML 元素来显示缩略图，进度条和文件名称。File 对象的 getAsDataURL 可以将文件内容以 URL 的形式返回，对图片文件来说可以用来显示缩略图。要注意的一点是，在 drop 事件处理函数里要取消事件的继续传播和默认处理函数，结束 drop 事件的处理。清单 10 展示了 drop 事件的处理代码。
清单 10 drop 事件的处理
function handleDrop(event)
{
// 获取拖拽的文件列表
var files = event.dataTransfer.files;
event.stopPropagation();
event.preventDefault();
var fileList = document.getElementById("fileList");
// 展示文件缩略图，文件名和上传进度，上传文件
for (var i = 0; i < files.length; i++)
{
var file = files[i];
var li = document.createElement('li');
var progressbar = document.createElement('div');
var img = document.createElement('img');
var name = document.createElement('span');
progressbar.className = "progressBar";
img.src = files[i].getAsDataURL();
img.width = 32;
img.height = 32;
name.innerHTML = file.name;
li.appendChild(img);
li.appendChild(name);
li.appendChild(progressbar);
fileList.appendChild(li);
uploadFile(file, progressbar)
}
}
上传文件
我们可以通过 XMLHttpRequest 对象的 sendAsBinary 方法来上传文件，通过侦听 upload 的 progress，load 和 error 事件来监测文件上传的进度，成功完成或是否发生错误。在 progress 事件处理函数里我们通过计算已经上传的比例来确定进度条的位置。参见清单 11。图 4 展示了上传文件的效果图。
清单 11 上传文件
function uploadFile(file, progressbar)
{
var xhr = new XMLHttpRequest();
var upload = xhr.upload;
var p = document.createElement('p');
p.textContent = "0%";
progressbar.appendChild(p);
upload.progressbar = progressbar;
// 设置上传文件相关的事件处理函数
upload.addEventListener("progress", uploadProgress, false);
upload.addEventListener("load", uploadSucceed, false);
upload.addEventListener("error", uploadError, false);
// 上传文件
xhr.open("POST", "upload.jsp?fileName="+file.name);
xhr.overrideMimeType("application/octet-stream");
xhr.sendAsBinary(file.getAsBinary());
}
function uploadProgress(event)
{
if (event.lengthComputable)
{
// 将进度换算成百分比
var percentage = Math.round((event.loaded * 100) / event.total);
console.log("percentage:" + percentage);
if (percentage < 100)
{
event.target.progressbar.firstChild.style.width = (percentage*2) + "px";
event.target.progressbar.firstChild.textContent = percentage + "%";
}
}
}
function uploadSucceed(event)
{
event.target.progressbar.firstChild.style.width = "200px";
event.target.progressbar.firstChild.textContent = "100%";
}
function uploadError(error)
{
alert("error: " + error);
}
本文通过对 File API 规范的讲解，以及两个展示其使用方法的例子，为大家提前揭示了作为未来 HTML5 重要组成部分的 JavaScript File API 的全貌。利用它，结合其他 HTML5 的新特性，比如 Drag&Drop，我们可以利用纯 JavaScript 方案，为用户提供更好使用体验的 Web 应用，与此同时，这样的一致化方案也使我们避免了以往跨浏览器支持所花费的巨大代价。相信 File API 的出现和广泛应用，将会是未来的 Web 2.0 应用的大势所趋。