原生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 相关文章推荐
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
jquery中动态效果小结
Dec 16 Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
vue.js template模板的使用(仿饿了么布局)
Aug 13 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
js尾调用优化的实现
May 23 Javascript
Vue父子传递实例讲解
Feb 14 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
vue键盘事件点击事件加native操作
Jul 27 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
深入解析php模板技术原理【一】
2008/01/10 PHP
使用gd库实现php服务端图片裁剪和生成缩略图功能分享
2013/12/25 PHP
简单理解PHP的面向对象编程方式
2016/05/17 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
php封装单文件上传到数据库(路径)
2017/10/15 PHP
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
JavaScript中switch判断容易犯错的一个细节
2014/08/27 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
浅谈JavaScript 中有关时间对象的方法
2016/08/15 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
解决Vue编译时写在style中的路径问题
2017/09/21 Javascript
详解如何在Vue项目中导出Excel
2019/04/19 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
python实现随机密码字典生成器示例
2014/04/09 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
详解Python的Lambda函数与排序
2016/10/25 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
python处理csv中的空值方法
2018/06/22 Python
python寻找list中最大值、最小值并返回其所在位置的方法
2018/06/27 Python
Pycharm 实现下一个文件引用另外一个文件的方法
2019/01/17 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
python 获取当前目录下的文件目录和文件名实例代码详解
2020/03/10 Python
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
英语系毕业生自荐信
2013/10/31 职场文书
宿舍违规检讨书
2014/01/12 职场文书
董事长助理岗位职责
2014/02/18 职场文书
《三顾茅庐》教学反思
2014/04/10 职场文书
政协调研汇报材料
2014/08/15 职场文书
2015感人爱情寄语
2015/02/26 职场文书
员工手册编写范本
2015/05/14 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书