JavaScript如何实现txt文件上传预览功能

小编给大家分享一下JavaScript如何实现txt文件上传预览功能，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

10余年专注成都网站制作，企业网站设计，个人网站制作服务，为大家分享网站制作知识、方案，网站设计流程、步骤,成功服务上千家企业。为您提供网站建设,网站制作,网页设计及定制高端网站建设服务,专注于企业网站设计,高端网页制作,对除甲醛等多个领域，拥有多年设计经验。

今天做项目刚好碰到这个记录一下。因为是简单的txt文件，只涉及文本，如果需要涉及图片预览就需要使用papaparse和jschardet，此处不多叙述。

 表单按钮使用js的onchange=”uploadfile()” 事件，function函数代码如下所示：

//此处为txt文件上传预览的js代码
function uploadfile(){
 var file=$("#txt")[0].files[0];
 //判断上传文件是不是txt格式,判断后缀是不是.txt
 if(file.name.substr(-4).toLocaleLowerCase() != '.txt'){
  alert("请上传格式为txt的文件！");
  windows.location="test.jsp";//重新定位到上传txt文件页面
 }
 else//如果上传文件是txt文件，则显示文件的预览
 {
  var reader=new FileReader;
  reader.readAsText(file,'gb2312');
  //reader.readAsDataURL(file);
  reader.onload=function(evt){
   var data=evt.target.result;  
   $('#textarea_id').val(data); 
  } 
 } 
}

效果如下：

提示上传文件类型错误

补充：

js 上传文件预览

1. FILE API

   html5提供了FIle和FileReader两个方法，可以读取文件信息并读取文件。

2. example