JavaScript html5利用FileReader实现上传功能


Posted in Javascript onMarch 27, 2020

本文实例为大家分享了H5利用FileReader上传文件的具体代码,供大家参考,具体内容如下

1. Html部分

<h2>文件上传演练</h2> 
 <div id="result"> 
 <!-- 这里用来显示读取结果 --> 
 <div id="inResult"> 
 <div id="inImgs"></div> 
 <div id="imgInfo"></div> 
 </div> 
 </div> 
 
 <input type="text" id="txtImgSrc" /><!--显示图片信息--> 
 <input type="button" id="btnRemove" /> 
 <button id="btnBrowse" onClick="onFile()">Browse...</button> 
 <input type="file" id="file_input" />

2. JS部分

<script type="text/javascript"> 
 var result = document.getElementById("result"); 
 var input = document.getElementById("file_input"); 
 var inResult = document.getElementById('inResult'); 
 
 if(typeof FileReader === 'undefined'){ 
 result.innerHTML = "抱歉,你的浏览器不支持 FileReader"; 
 input.setAttribute('disabled','disabled'); 
 }else{ 
 input.addEventListener('change',readFile,false); 
 } 
 function onFile(){ 
 document.getElementById('file_input').click(); //打开<input type="file" id="file_input" /> 
 }  
   
 function readFile(){ 
 var file = this.files[0]; 
 var fsize = parseInt((file.size)/1024); //计算图片大小,默认是B,转换成KB 
 if(!/image\/\w+/.test(file.type)){ 
  alert("请确保文件为图像类型"); 
  return false; 
 } 
 var reader = new FileReader(); 
 reader.readAsDataURL(file); 
  
 reader.onload = function(e){ 
  //alert(this.result); 
  inImgs.innerHTML = '<img src="'+this.result+'" alt="" width="198px" height="250px" id="img"/>'; //显示图片 
  var arr = input.value.split('\\'); //分割图片路径 
  document.getElementById('result').style.display="block"; 
  document.getElementById('txtImgSrc').value = arr[arr.length-1]; //取数组最后部分 - 图片名字.jpg 
  document.getElementById('imgInfo').innerHTML = arr[arr.length-1]+"<br/>("+fsize+"kb)"; //显示图片名字加图片大小 
  
 } 
 } 
</script>

3.图片测试

JavaScript html5利用FileReader实现上传功能

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery实战_读书笔记1—选择jQuery
Jan 22 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
js的回调函数详解
Jan 05 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
Node.js 8 中的 util.promisify的详解
Jun 12 Javascript
Angular4学习笔记之准备和环境搭建项目
Aug 01 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
Aug 17 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
微信小程序间使用navigator跳转传值问题实例分析
Mar 27 Javascript
浅谈JavaScript中你可能不知道URL构造函数的属性
Jul 13 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 Javascript
Vertx基于EventBus发送接受自定义对象
Nov 16 Javascript
利用ES6语法重构React组件详解
Mar 02 #Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 #Javascript
JavaScript表单验证完美代码
Mar 02 #Javascript
js实现常见的工具条效果
Mar 02 #Javascript
详谈jQuery unbind 删除绑定事件 / 移除标签方法
Mar 02 #Javascript
jQuery给表格添加分页效果
Mar 02 #Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 #Javascript
You might like
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
php socket通信简单实现
2016/11/18 PHP
JS编程小常识很有用
2012/11/26 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
2013/01/15 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
jQuery使用unlock.js插件实现滑动解锁
2017/04/04 jQuery
JS鼠标3次点击事件实现代码及扩展思路
2017/09/12 Javascript
vuex 的简单使用
2018/03/22 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
2018/04/28 jQuery
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
python清除函数占用的内存方法
2018/06/25 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
python实现点击按钮修改数据的方法
2019/07/17 Python
python分布式编程实现过程解析
2019/11/08 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
Django实现内容缓存实例方法
2020/06/30 Python
Python grequests模块使用场景及代码实例
2020/08/10 Python
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
英国领先的维生素和营养补充剂直接供应商:Healthspan
2019/04/22 全球购物
促销活动策划方案
2014/01/12 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
医疗专业毕业生求职信
2014/08/28 职场文书
2014年材料员工作总结
2014/11/19 职场文书
2015年体育部工作总结
2015/04/02 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python