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的几种方法小结
Apr 25 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
Sep 01 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
Sep 02 Javascript
JS实现浏览器状态栏显示时间的方法
Oct 27 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
Bootstrap源码解读排版(1)
Dec 23 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
May 01 Javascript
JavaScript继承定义与用法实践分析
May 28 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
Vue.directive 实现元素scroll逻辑复用
Nov 29 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 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
实用函数5
2007/11/08 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
JavaScript入门教程(5) js Screen屏幕对象
2009/01/31 Javascript
div移动 输入框不能输入的问题
2009/11/19 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
jqGrid中文文档之选项设置
2015/12/02 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
LayerClose弹窗关闭刷新方法
2018/08/17 Javascript
mpvue项目中使用第三方UI组件库的方法
2018/09/30 Javascript
详解从NodeJS搭建中间层再谈前后端分离
2018/11/13 NodeJs
手把手带你封装一个vue component第三方库
2019/02/14 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
2019/04/17 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
python3.3教程之模拟百度登陆代码分享
2014/01/16 Python
Python open()文件处理使用介绍
2014/11/30 Python
Python实现以时间换空间的缓存替换算法
2016/02/19 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
Python 如何对文件目录操作
2020/07/10 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
荷兰天然和有机产品网上商城:BigGreenSmile.nl
2020/07/26 全球购物
期终自我鉴定
2014/02/17 职场文书
期末学生评语大全
2014/04/24 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
中华魂演讲稿
2014/05/13 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers