js预览上传后的txt文档

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

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


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("
"); $("#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; }
js预览上传后的txt文档_第1张图片
image.png

你可能感兴趣的:(js预览上传后的txt文档)