點評：今天，我將向大家分享一個簡單的應用，用來演示使用FileReader的方法, FileReader是HTML5里提供的一個文件操作API,需要的朋友可以了解下
在前面的幾篇文章里，我向大家共享了幾個HTML5的例子，分別是拖拽功能演示，頁面內容可編輯化演示 和 本地存儲功能演示。 今天，我將向大家分享一個簡單的應用，用來演示使用FileReader的方法, FileReader是HTML5里提供的一個文件操作API。復制代碼
代碼如下:
function imagesSelected(myFiles) {
for (var i = 0, f; f = myFiles[i]; i++) {
var imageReader = new FileReader();
imageReader.onload = (function(aFile) {
return function(e) {
var span = document.createElement(‘span‘);
span.innerHTML = ['<img src="', e.target.result,'" title="', aFile.name, '"/>'].join(”);
document.getElementById(‘thumbs’).insertBefore(span, null);
};
})(f);
imageReader.readAsDataURL(f);
}
}
function dropIt(e) {
imagesSelected(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}
復制代碼
代碼如下:
<td align=”left” height=”105″ ondragenter=”return false” ondragover=”return false” ondrop=”dropIt(event)”>
<output id=”thumbs”></output>
</td>
新聞熱點
疑難解答
