首页 >web前端 >js教程 >js实现txt文件的上传并预览的代码

js实现txt文件的上传并预览的代码

小云云
小云云原创
2018-03-26 17:19:102271浏览

本文主要和大家分享js实现txt文件的上传并预览的代码,因为是简单的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);   
        }   
    }   
}

效果如下:
提示上传文件类型错误
这里写图片描述
这里写图片描述

今天做项目刚好碰到这个记录一下。因为是简单的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);   
        }   
    }   
}

效果如下:
提示上传文件类型错误
这里写图片描述
这里写图片描述

相关推荐:

PHP逐行读取txt文件的方法实例

以上是js实现txt文件的上传并预览的代码的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn