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 相关文章推荐
Textbox控件注册回车事件及触发按钮提交事件具体实现
Mar 04 Javascript
JS根据变量保存方法名并执行方法示例
Apr 04 Javascript
JQuery.get提交页面不跳转的解决方法
Jan 13 Javascript
深入浅析JavaScript中对事件的三种监听方式
Sep 29 Javascript
Javascript日期格式化format函数的使用方法
Aug 30 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
学习使用Bootstrap栅格系统
May 11 Javascript
微信小程序新增的拖动组件movable-view使用教程
May 20 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
Angular通过指令动态添加组件问题
Jul 09 Javascript
JavaScript复制变量三种方法实例详解
Jan 09 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&amp;mysql(一)
2006/10/09 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP实现的下载远程图片自定义函数分享
2015/01/28 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
js中有关IE版本检测
2012/01/04 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
jquery siblings获取同辈元素用法实例分析
2016/07/25 Javascript
js 作用域和变量详解
2017/02/16 Javascript
AngularJS 单选框及多选框的双向动态绑定
2017/04/20 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
用vue写一个仿简书的轮播图的示例代码
2018/03/13 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
vue模仿网易云音乐的单页面应用
2019/04/24 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
python中global与nonlocal比较
2014/11/21 Python
Python利用Nagios增加微信报警通知的功能
2016/02/18 Python
python爬虫爬取网页表格数据
2018/03/07 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python实现猜数游戏(保存游戏记录)
2020/06/22 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
速比涛英国官网:Speedo英国
2019/07/15 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
中专生自我鉴定范文
2013/12/19 职场文书
美国探亲签证邀请信
2014/02/05 职场文书
民主评议党员总结
2014/10/20 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android