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

本文主要和大家分享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文件的上传并预览的代码的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2779131.html

(0)
上一篇 2025年3月8日 15:43:47
下一篇 2025年2月25日 04:30:07

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS和JQuery对操作DOM的方法

    本文主要和大家分享JS和JQuery对操作DOM的方法,主要以代码的方法,希望能帮助到大家。 查询节点: js:1.根据id查询;2.根据标签名查询;3.根据name查询;4.根据层次查询;详情如下: //1.根据ID查询节点var ul …

    编程技术 2025年3月8日
    000
  • js判断是PC端还是移动端

    本文主要和大家分享js判断是PC端还是移动端的方法,希望能帮助到大家。 #### 方案1:”function IsPC() {    var userAgentInfo = navigator.userAgent;    var Agent…

    编程技术 2025年3月8日
    200
  • js事件流以及扩展应用实例

    什么是事件流呢?本文主要和大家分享js事件流以及扩展应用实例,希望能帮助到大家。 DOM标准规定事件流包括三个阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。  ● 事件捕获阶段:实际目标( )在捕获阶段不会接收事件。也就是在捕获阶段,事件…

    2025年3月8日
    200
  • JS实现逐字出现效果代码

    本文主要和大家分享JS实现逐字出现效果代码,最近看到一个简单实用的逐字出现动画效果,自己简单写了一个,小技巧,可以值得保存。 先上效果图: 源码: nbsp;html>逐字出来的效果,哈哈哈哈哈哈哈哈哈   var index = 0…

    2025年3月8日
    200
  • js的offset是什么意思及使用详解

    offset的意思为“偏离、位移”,在js中属于一个系列属性,包括有“offsetHeight”、“offsetWidth”、“offsetLeft”、“offsetTop”、“offsetParent”;它们可以用于获取元素尺寸。 off…

    2025年3月8日
    200
  • js之圣杯模式讲解

    圣杯模式的存在是用来继承已有原型对象(A.prototype)中的成员(主要是公用方法),同时根据自己的需求修改原型对象(A.prototype)以定制符合我们要求的构造函数B,这个修改对已有的实例(a1,a2,…)不会产生影响。 普通继承…

    编程技术 2025年3月8日
    200
  • JS之立即执行函数讲解

    本文主要和大家分享js之立即执行函数讲解,所谓立即执行函数(immediately-invoked function expression),即在函数表达式之后加()就可以使函数自执行。注意:不能再函数声明后加括号()。 (function…

    编程技术 2025年3月8日
    200
  • js分页器详解

    本文主要和大家分享js分页器详解,我们先来看一下效果,希望能帮助到大家。 依赖于:bootstrap 和 jquery html代码:通过class=”pj_pager”引用,pj_total初始化总条数 登录后复制…

    2025年3月8日
    200
  • JS实现定时器

    本文主要和大家分享JS实现定时器,主要以代码的形式和大家分享,希望能帮助到大家。 问题描述:定时执行一个事件 主要是解决重新开始的问题 html     start    stop 登录后复制 script window.addEventL…

    编程技术 2025年3月8日
    200
  • js基本包装类型详解

    本文主要和大家分享js基本包装类型详解,希望能帮助到大家。 1. boolean类型 var falseObject = new Boolean(false);//falseObject是对象var result = falseObject…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论