清单 9.拖拽处理
-
function handleFiles(files, dropbox, e) {
-
if(files.length == 0){// 若文件不存在，则用相应文本代替
-
var dt = e.dataTransfer;
-
var text = dt.getData("text/plain");
-
var p = document.createElement("p");
-
p.innerHTML += text;
-
dropbox.appendChild(p);
-
return;
-
}
-
-
for (var i = 0; i < files.length; i++) {
-
var file = files[i];
-
var fileProcessor = dropbox.firstChild;
-
fileProcessor.classList.add("obj");
-
filefileProcessor.file = file; // 添加文件
-
-
var reader = new FileReader();
-
reader.onload = (// 读取文件内容
-
function(aFileProcessor) {
-
return function(e) {
-
aFileProcessor.src = e.target.result;
-
};
-
}
-
)(fileProcessor);
-
reader.readAsDataURL(file);
-
}
-
}
handleFiles函数首先判断文件是否存在，若不存在，则以相应文字取代，若存在，则对所有文件一一进行处理。向fileprocessor( 这里是视频标签 ) 添加文件，然后利用FileReader读取文件内容至fileprocessor进行处理。
图5显示了拖拽一个视频文件movie.ogg到播放器的效果。
图 5.视频播放
本地存储
Web操作系统通常将大部分数据存储于服务器端，这样做的好处显而 易见，数据存储空间更大，安全性更好。然而这样做也有不足之处，由于网络的稳定性依然较本地磁盘差，所以在脱离网络的状况下，Web操作系统无法获取相应 的数据资源，因此Web操作系统需要一定的访问本地存储空间的能力，当然本地存储空间仅是作为服务器端存储的一个补充，它的空间有限，访问也受到一定的限 制。
一直以来，HTML以Cookie作为访问本地空间的方式，然而， 这种方式有着很多缺点和不足，如存储的数据格式过于简单，通常仅为键值对；存储的空间大小有限。为此，HTML5 提供了本地数据库以增强本地存储空间的访问能力，它是一个简化版的数据库，能够支持模拟的SQL以及简单的事务处理等功能。
系统为支持本地存储，创建了一个名为 MyData 的数据库。清单 10 显示了数据库创建的过程。
清单 10. 创建数据库
-
var db;
-
var openDatabase;
-
if(openDatabase != undefined)
-
db = openDatabase('MyData', '', 'My Database', 102400);
其中MyData为数据库的名称，省略的参数为数据库的版本，My Database为显示的名称，最后的数字为数据库预估长度（以字节为单位）。
系统日志将系统在某一时间的行为操作记录下来，本地数据库为其提供存储支持。日志在数据库中存储为表History，包含3个字段，分别为时间，操作，及操作的详细信息。清单 11显示了系统是如何记录日志的。
清单 11.日志记录
-
var time = new Date().getTime();
-
var action = "open app";
-
var details = "open: " + appId;
-
addHistory(time, action, details);// 向系统日志中添加一条记录
(责任编辑：12图资源库)
