功能介绍:
网站通常通过file类型的标签进行文件的上传,文件为客户端任意位置(桌面、C盘、D盘……)的文件。有时,需求需要在文件上传到服务器之前,在页面的某区域显示文件的内容。这在过去的技术中,是很难实现的,但是通过H5的API接口,却可以通过很少的代码实现此功能。
代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>页面预览显示上传的文件内容</title>
</head>
<body>
<div class="div1">
<input type="file" name="" id="file" class="file" οnchange="textMess(this.files)">
<hr>
选中文件内容展示区:
<div id="div2"></div>
</div>
<style>
#div2{
border:1px solid black;
overflow:auto;
height:300px;
}
</style>
<script>
function textMess(file){
var mess=file[0];
var file=new FileReader();
file.readAsText(mess);
file.οnlοad=function(e){
var htmlCode=e.target.result;
document.getElementById("div2").innerText=htmlCode;
}
}
</script>
</body>
</html>
注释:本示例只能上传一个文件,若需要上传多个文件,请自行修改一下。
页面展示: