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 相关文章推荐
ExtJS 设置级联菜单的默认值
Jun 13 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
js获取视频时长代码
Apr 10 Javascript
JavaScript中的Math 使用介绍
Apr 21 Javascript
javaScript如何处理从java后台返回的list
Apr 24 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
May 25 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 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实现防盗链的方法分析
2017/07/25 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
php 后端实现JWT认证方法示例
2018/09/04 PHP
node.js Web应用框架Express入门指南
2014/05/28 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
使用npm发布Node.JS程序包教程
2015/03/02 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
Jquery实现仿京东商城省市联动菜单
2015/11/19 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
vue.js的computed,filter,get,set的用法及区别详解
2018/03/08 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
微信公众号平台接口开发 获取access_token过程解析
2019/08/14 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
[01:22]DOTA2神秘商店携大量周边降临完美大师赛
2017/11/07 DOTA
[55:54]FNATIC vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python select.select模块通信全过程解析
2017/09/20 Python
Python3实现转换Image图片格式
2018/06/21 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
饭店工作计划书
2014/01/10 职场文书
参观考察邀请函范文
2014/01/29 职场文书
体育课课后反思
2014/04/24 职场文书
纪检干部先进事迹材料
2014/08/23 职场文书
中学生学习保证书
2015/02/26 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
python基础之文件处理知识总结
2021/05/23 Python
浅谈Python数学建模之整数规划
2021/06/23 Python
Win11 Build 21996.1 Dev版怎么样? win11系统截图欣赏
2021/11/21 数码科技
idea下配置tomcat避坑详解
2022/04/12 Servers
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python