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使用手册之二 DOM操作
Mar 24 Javascript
使用jQuery实现的网页版的个人简历(可换肤)
Apr 19 Javascript
js综合应用实例简单的表格统计
Sep 03 Javascript
javascript 获取iframe里页面中元素值的方法
Feb 17 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
基于JavaScript实现快速转换文本语言(繁体中文和简体中文)
Mar 07 Javascript
浅谈JS封闭函数、闭包、内置对象
Jul 18 Javascript
vue-cli2.9.3 详细教程
Apr 23 Javascript
Angular学习教程之RouterLink花式跳转
May 03 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
.netcore+vue 实现压缩文件下载功能
Sep 24 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中文分词的简单实现代码分享
2011/07/17 PHP
163的邮件用phpmailer发送(实例详解)
2013/06/24 PHP
PHP中比较两个字符串找出第一个不同字符位置例子
2014/04/08 PHP
PHP 之 写时复制介绍(Copy On Write)
2014/05/13 PHP
CI框架Session.php源码分析
2014/11/03 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
jQuery实现选项联动轮播效果【附实例】
2016/04/19 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )
2017/03/31 Javascript
bootstrap+jQuery实现的动态进度条功能示例
2017/05/25 jQuery
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
vue实现条件判断动态绑定样式的方法
2018/09/29 Javascript
react配置antd按需加载的使用
2019/02/11 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
python实现数据写入excel表格
2018/03/25 Python
python 编码规范整理
2018/05/05 Python
浅谈tensorflow中张量的提取值和赋值
2020/01/19 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
怎样写好自荐信和推荐信
2013/12/26 职场文书
施工材料员岗位职责
2014/02/12 职场文书
退休教师欢送会主持词
2014/03/31 职场文书
个人安全承诺书
2014/05/22 职场文书
三月法制宣传月活动总结
2014/07/03 职场文书
房屋出租委托书格式
2014/09/23 职场文书
2015年助残日活动总结
2015/03/27 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
委托书范本格式
2019/04/18 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python