美文网首页
js预览上传后的txt文档

js预览上传后的txt文档

作者: 眠九 | 来源:发表于2018-01-17 10:27 被阅读0次

项目中遇到的是,在文本域显示上传后的txt,可供用户修改,并在修改后再提交到后台。

这里要加载两个js,papaparse.js和jschardet.js这两个多用作上传图片后预览,所以用来做txt就更简单了。
界面上简单放一个上传文件按钮和显示文件区域;

<input type="file" onchange="turn()" id="text">
<div id="result" style="height:500px;"></div>

js中两个方法,一个做显示,一个做编码,假定设置为域名的上传。

   function turn(){
       var file = $("#text")[0].files[0];
//       指定上传文件为txt格式
       if(file.name.split(".")[file.name.split(".").length - 1] != "txt"){
           alert("请上传格式为TXT的文件。")
       }else{
           var reader = new FileReader;
           reader.readAsDataURL(file);
           reader.onload = function(evt){
               var data = evt.target.result;
               var encoding = checkEncoding(data);
               Papa.parse(file,{
                   encoding : encoding,
                   complete : function(res){
                       var data = res.data;
                       var str = data.join("<br/>");
                       $("#result").html(str);
                   }
               })
           }
       }
   }
//   验证上传文件编码
    function checkEncoding(base64Str){
//       指定上传文件文本格式
       var str = atob(base64Str.split(";base64,")[1]);
       var encoding = jschardet.detect(str);
       encoding = encoding.encoding;
       if(encoding == "window-1252"){
           encoding = "ANSI";
       }
       return encoding;
    }
image.png

相关文章

  • js预览上传后的txt文档

    项目中遇到的是,在文本域显示上传后的txt,可供用户修改,并在修改后再提交到后台。 这里要加载两个js,papap...

  • viewerjs+pdf.js预览pdf文件

    前言 开发预览功能,要对各种图片,txt文本,word文档,pdf文档做预览对于pdf文件的转换可以上传到后端由后...

  • 项目常用代码2(js上传头像预览/判断移动端pc端跳转适配)

    js上传头像预览 //html //js $(".files").change(function() { v...

  • 【VUE】 文件预览

    【VUE】 文件预览 上传前预览 word文档:docx、doc 核心代码 源文件 预览文件 Excel表格:xl...

  • vue多图上传到阿里云

    结合这两篇文章小程序选择图片、预览,上传到阿里云和阿里云上传图片 引入js 做循环判断上传成功后再上传下一张图 循...

  • 想法

    1.相册功能。js-sdk分析报告。上传下载调研。和七牛的搭配。 2.交互,左右滑动还是点击进去后预览。“预览”j...

  • js图片上传预览

    项目中碰到一个需求,上传图片及时给用户预览。开始的想法就是上传的图片先传递到后台,在通过ajax获取图片路径显示到...

  • JS图片上传预览

    划水摸鱼的时候研究了JS图片的上传预览,分别是FileReader()、createObjectURL(),在此分...

  • 6.16

    1. 打印文档时记住先预览文档后再打印。先预览的好处:预防文档格式不对、清楚文档有多少页面。 打印PDF文档时,如...

  • vue-pdf.js 在线预览问题

    最近修改公司vue项目中使用pdf.js来实现在线预览上传的各类文件.由于使用pdf.js在预览时是直接在标签内将...

网友评论

      本文标题:js预览上传后的txt文档

      本文链接:https://www.haomeiwen.com/subject/bppyoxtx.html