原生js FileReader对象实现图片上传本地预览效果


Posted in Javascript onMarch 27, 2020

本文实例为大家分享了js实现图片上传本地预览效果的具体代码,供大家参考,具体内容如下

原生js FileReader对象实现图片上传本地预览效果

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 label{display: inline-block;width:200px;height:40px;border:1px solid #ccc;}
 .ob{background:#ccc;padding:10px;}
 .imgbox img{height:100px;width:100px;margin:10px;}
 </style>
</head>
<body>
 <div class="ob" id="od" draggable="true">
 <input type="file" id="file" multiple="multiple">
 </div>
 <div class="imgbox"></div>
 <script>
 //获取文件url
 function createObjectURL(blob){
 if (window.URL){
 return window.URL.createObjectURL(blob);
 } else if (window.webkitURL){
 return window.webkitURL.createObjectURL(blob);
 } else {
 return null;
 }
 }

 var box = document.querySelector(".imgbox"); //显示图片box
 var file = document.querySelector("#file"); //file对象
 var domFragment = document.createDocumentFragment(); //文档流优化多次改动dom

 //触发选中文件事件
 file.onchange = function(e){
 box.innerHTML =""; //清空上一次显示图片效果
 e = e || event;
 var file = this.files; //获取选中的文件对象

 for(var i = 0, len = file.length; i < len; i++){
 var imgTag = document.createElement("img");
 var fileName = file[i].name; //获取当前文件的文件名
 var url = createObjectURL(file[i]); //获取当前文件对象的URL

 //忽略大小写
 var jpg = (fileName.indexOf(".jpg") > -1) || (fileName.toLowerCase().indexOf(".jpg") > -1);
 var png = (fileName.indexOf(".png") > -1) || (fileName.toLowerCase().indexOf(".png") > -1);
 var jpeg = (fileName.indexOf(".jpeg") > -1) || (fileName.toLowerCase().indexOf(".jpeg") > -1);

 //判断文件是否是图片类型
 if(jpg || png || jpeg){
  imgTag.src = url;
  domFragment.appendChild(imgTag);
 }else{
  alert("请选择图片类型文件!");
 }
 }

 //最佳显示
 box.appendChild(domFragment);

 }

 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
ArtEditor富文本编辑器增加表单提交功能
Apr 18 Javascript
AngularJS中的JSONP实例解析
Dec 01 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
AngularJS 打开新的标签页实现代码
Sep 07 Javascript
微信小程序url传参写变量的方法
Aug 09 Javascript
浅谈vue引用静态资源需要注意的事项
Sep 28 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 #Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 #Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 #jQuery
vue axios用法教程详解
Jul 23 #Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 #Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 #Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 #Javascript
You might like
PHP4实际应用经验篇(1)
2006/10/09 PHP
Windows Apache2.2.11及Php5.2.9-1的安装与配置方法
2009/06/08 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
PHP的PDO预处理语句与存储过程
2019/01/27 PHP
Array, Array Constructor, for in loop, typeof, instanceOf
2011/09/13 Javascript
window.open不被拦截的实现代码
2012/08/22 Javascript
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
SWFUpload多文件上传及文件个数限制的方法
2016/05/31 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
RequireJS简易绘图程序开发
2016/10/28 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
微信小程序使用字体图标的方法
2019/05/23 Javascript
vue 微信扫码登录(自定义样式)
2020/01/06 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
在Vue中使用CSS3实现内容无缝滚动的示例代码
2020/11/27 Vue.js
[05:59]2018DOTA2国际邀请赛寻真——只为胜利的Secret
2018/08/13 DOTA
python自动化测试之连接几组测试包实例
2014/09/28 Python
python中__slots__用法实例
2015/06/04 Python
简单上手Python中装饰器的使用
2015/07/12 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
python 成功引入包但无法正常调用的解决
2020/03/09 Python
Python视频编辑库MoviePy的使用
2020/04/01 Python
Pycharm如何导入python文件及解决报错问题
2020/05/10 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
营业员个人总结的自我评价
2013/10/25 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
学校万圣节活动方案
2014/02/13 职场文书
php实例化对象的实例方法
2021/11/17 PHP
利用Java连接Hadoop进行编程
2022/06/28 Java/Android