html在线展示文档,html 文件展示

二话不说，上code。

中间用到了 FileReader，把图片数据读取并且展示

使用了方法onload 和 readAsDataURL

code

.thumb {

height: 75px;

border: 19x solid #000;

margin: 10px 5px 0 0;

}

function handleFileSelect(evt) {

// for (var i in evt.target) {

// console.log(i)

// console.log(evt.target[i])

// console.log(" ")

// }

var files = evt.target.files;

for (var i = 0; i < files.length; ++i) {

var file = files[i];

// image/png

if (!file.type.match('image*')) {

continue;

}

// console.log(file.type)

var reader = new FileReader();

console.log("2333")

reader.onload = (function(theFile) {

return function(e) {

var span = document.createElement("span")

console.log("result " + e.target.result)

span.innerHTML = ['', '
'].join('')

document.getElementById('list').insertBefore(span, null);

}

})(file);

reader.readAsDataURL(file)

}

}

document.getElementById("files").addEventListener('change',handleFileSelect, false);