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的页面划词搜索JS
Sep 14 Javascript
JavaScript日期时间格式化函数分享
May 05 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
最常见和最有用的字符串相关的方法详解
Feb 06 Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
Dec 11 Javascript
Vue使用Clipboard.JS在h5页面中复制内容实例详解
Sep 03 Javascript
echarts浮动显示单位的实现方法示例
Dec 04 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的正则处理函数总结分析
2008/06/20 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
thinkphp 5框架实现登陆,登出及session登陆状态检测功能示例
2019/10/10 PHP
ext监听事件方法[初级篇]
2008/04/27 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
解析javascript图片懒加载与预加载的分析总结
2016/10/27 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
javaScript动态添加Li元素的实例
2018/02/24 Javascript
每天学点Vue源码之vm.$mount挂载函数
2019/03/11 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
2020/11/16 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
使用cx_freeze把python打包exe示例
2014/01/24 Python
python中urllib.unquote乱码的原因与解决方法
2017/04/24 Python
详谈Python2.6和Python3.0中对除法操作的异同
2017/04/28 Python
对numpy中向量式三目运算符详解
2018/10/31 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
农场厂长岗位职责
2013/12/28 职场文书
还款承诺书范文
2014/05/20 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
计生个人工作总结
2015/02/28 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书
开场白怎么写
2015/06/01 职场文书
少先队中队工作总结
2015/08/14 职场文书
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python