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 相关文章推荐
javascript prototype 原型链
Mar 12 Javascript
学习ExtJS 访问容器对象
Oct 07 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
利用进制转换压缩数字函数分享
Jan 02 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
jQuery仿IOS弹出框插件
Feb 18 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
Vue实现指令式动态追加小球动画组件的步骤
Dec 18 Vue.js
利用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新手上路(六)
2006/10/09 PHP
解析php中eclipse 用空格替换 tab键
2013/06/24 PHP
php 表单提交大量数据发生丢失的解决方法
2014/03/03 PHP
thinkPHP引入类的方法详解
2016/12/08 PHP
JavaScript Cookie的读取和写入函数
2009/12/08 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
js修改原型的属性使用介绍
2014/01/26 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
详解AngularJS中的作用域
2015/06/17 Javascript
基于JavaScript创建动态Dom
2015/12/08 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
微信小程序 支付简单实例及注意事项
2017/01/06 Javascript
基于easyui checkbox 的一些操作处理方法
2017/07/10 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
2017/08/16 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
js实现for循环跳过undefined值示例
2019/07/02 Javascript
javascript实现放大镜功能
2020/12/09 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
windows环境下tensorflow安装过程详解
2018/03/30 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
python爬虫超时的处理的实例
2018/12/19 Python
Python3+Selenium+Chrome实现自动填写WPS表单
2020/02/12 Python
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
师范生自荐信范文
2013/10/06 职场文书
建筑工程自我鉴定
2013/10/18 职场文书
上班上网检讨书
2014/01/29 职场文书
期中考试后的反思
2014/02/08 职场文书
市政管理求职信范文
2014/05/07 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
2016党员学习作风建设心得体会
2016/01/21 职场文书
导游词之日月潭
2019/11/05 职场文书
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers