JavaScript代码实现txt文件的上传预览功能


Posted in Javascript onMarch 27, 2018

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

效果如下:

JavaScript代码实现txt文件的上传预览功能
JavaScript代码实现txt文件的上传预览功能
JavaScript代码实现txt文件的上传预览功能

提示上传文件类型错误

补充:

js 上传文件预览

1. FILE API

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

2. example

<html>
<body>
<div id="test-image-preview" 
style="border: 1px solid rgb(204, 204, 204); width: 100%; height: 200px; background-size: contain; background-repeat: no-repeat; background-position: center center;"> </div>
<br/>
<div id="test-file-info"></div>
<br/>
<input type="file" id="test-image-file">
<script type="text/javascript">
var
 fileInput = document.getElementById('test-image-file'),
 info = document.getElementById('test-file-info'),
 preview = document.getElementById('test-image-preview');
// 监听change事件:
fileInput.addEventListener('change', function () {
 // 清除背景图片:
 preview.style.backgroundImage = '';
 // 检查文件是否选择:
 if (!fileInput.value) {
  info.innerHTML = '没有选择文件';
  return;
 }
 // 获取File引用:
 var file = fileInput.files[0];
 // 获取File信息:
 info.innerHTML = '文件: ' + file.name + '<br>' +
      '大小: ' + file.size + '<br>' +
      '修改: ' + file.lastModifiedDate;
 if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
  alert('不是有效的图片文件!');
  return;
 }
 // 读取文件:
 var reader = new FileReader();
 reader.onload = function(e) {
  var
   data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'   
  preview.style.backgroundImage = 'url(' + data + ')';
 };
 // 以DataURL的形式读取文件:
 reader.readAsDataURL(file);
});
</script>
</body>
</html>

  以DataURL的形式读取到的文件是一个字符串,类似于data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...,

常用于设置图像。如果需要服务器端处理,把字符串base64,后面的字符发送给服务器并用Base64解码就可以得到原始文件的二进制内容。

3. 解释

上面的代码还演示了JavaScript的一个重要的特性就是单线程执行模式。在JavaScript中,浏览器的JavaScript执行引擎在执行JavaScript代码时,总是以单线程模式执行,也就是说,任何时候,JavaScript代码都不可能同时有多于1个线程在执行。

你可能会问,单线程模式执行的JavaScript,如何处理多任务?

在JavaScript中,执行多任务实际上都是异步调用,比如上面的代码:

reader.readAsDataURL(file);

就会发起一个异步操作来读取文件内容。因为是异步操作,所以我们在JavaScript代码中就不知道什么时候操作结束,因此需要先设置一个回调函数:

reader.onload = function(e) {
 // 当文件读取完成后,自动调用此函数:
};

当文件读取完成后,JavaScript引擎将自动调用我们设置的回调函数。执行回调函数时,文件已经读取完毕,所以我们可以在回调函数内部安全地获得文件内容。

总结

以上所述是小编给大家介绍的JavaScript代码实现txt文件的上传预览功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript MD4
Dec 20 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
jquery中checkbox使用方法简单实例演示
Nov 24 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
Angular Excel 导入与导出的实现代码
Apr 17 Javascript
taro开发微信小程序的实践
May 21 Javascript
Angularjs实现控制器之间通信方式实例总结
Mar 27 #Javascript
Angular中使用better-scroll插件的方法
Mar 27 #Javascript
使用node打造自己的命令行工具方法教程
Mar 26 #Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 #Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 #Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 #Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 #Javascript
You might like
PHP 中的类
2006/10/09 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
smarty中js的调用方法示例
2014/10/27 PHP
PHP多态代码实例
2015/06/26 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
游览器中javascript的执行过程(图文)
2012/05/20 Javascript
浅析javascript 定时器
2014/12/23 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
Vue实现简易翻页效果源码分享
2018/11/08 Javascript
深入了解js原型模式
2019/05/30 Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
2020/07/21 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
单利模式及python实现方式详解
2018/03/20 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
Python 函数返回值的示例代码
2019/03/11 Python
python获取linux系统信息的三种方法
2020/10/14 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
Java如何调用外部Exe程序
2015/07/04 面试题
轻金属冶金专业毕业生自荐信
2013/11/02 职场文书
英语演讲稿范文
2014/01/03 职场文书
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
反腐倡廉学习心得体会范文
2015/08/15 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
opencv 分类白天与夜景视频的方法
2021/06/05 Python
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
MySQL窗口函数的具体使用
2021/11/17 MySQL