<!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>原生实现图片预览功能</title>

 </head>

 <body>

     <label for="file">点击上传文件</label>

     <input id="file" onchange="uploadFiles()" accept="image/png,image/jpeg" type='file' multiple />

     <div class="preview">

         <p>No files currently selected for upload</p>

     </div>

     <script>

         const input = document.querySelector('input');

         input.style.opacity = 0;

         function uploadFiles() {

             const files = input.files; // 从元素的files属性获取文件列表

             const preview = document.querySelector('.preview');

             while(preview.firstChild) { // 每次都清空原有列表

                 preview.removeChild(preview.firstChild);

             }

             const ol = document.createElement('ol');

             preview.appendChild(ol);

             for(let file of files) {

                 const li = document.createElement('li');

                 const newLi = showFiles(file, li, preview);

                 preview.appendChild(newLi);

             }

         }

         function showFiles(file, li) {

             const { name, size, type  } = file;

             const isValidate = validateFileType(type)

             if (isValidate) {

                 const img = document.createElement('img');

                 img.src = window.URL.createObjectURL(file); //***生成文件路径，添加到img的src

                 const sizeChanged = getSize(size);

                 const textContent = document.createTextNode(name + ': ' + sizeChanged);

                 li.appendChild(textContent);

                 li.appendChild(img);

             } else {

                 const textContent = document.createTextNode("InValide File Type");

                 li.appendChild(textContent);

             }

             return li;

         }

         function getSize(size) { // 按照用户习惯计算大小

             if (size<1024) {

                 return size + 'byte';

             } else if (size<1048576) {

                 return (size/1024).toFixed(1) + 'KB';

             } else {

                 return (size/1048576).toFixed(1) + 'MB';

             }

         }

         const fileTypes = ['image/png', 'image/jpeg'];

         function validateFileType(type) { // 验证文件类型

             if (!fileTypes.includes(type)) {

                 return false;

             }

             return true;

         }

     </script>

 </body>

 </html>

原生JS实现图片上传并预览功能的更多相关文章

  1. 一、简单的图片上传并预览功能input[file]

    一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...

  2. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  3. js实现图片上传本地预览

    演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html> <head> & ...

  4. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  5. 基于jquery实现图片上传本地预览功能

    一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...

  6. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

  7. jQuery：[1]实现图片上传并预览

    jQuery:[1]实现图片上传并预览 原理 预览思路 1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL: 2.把对象URL赋值给实现写好的img标签的src属性 Fil ...

  8. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  9. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

随机推荐

  1. Python笔记008函数（2）

    1.        昨日内容回顾: def 函数(): 函数体 return 值 如果不写return,默认返回None.可以单独返回一个值,也能够以元组的形式返回多个值.(不要把print和retu ...

  2. Python笔记004-Python最基本内置数据类型和运算符

    第二章(1)Python编程基础概念 1. 最基本内置数据类型和运算符 每个对象都有类型,Python 中最基本的内置数据类型: 1. 整数 整数,2345 ,10 ,50 2. 浮点型 小数,3.1 ...

  3. 其实每个行业都有各自的辛苦，好的程序员并不累，他们乐此不疲（见过太多在职位事业、人生方向上随转如流的人，累了疲乏了就去做别的事情了。必须有自己的坚守和立足的点，自我驱动，否则沦为在别人的体制制度中被驱赶一生）good

    作者:陈柯好链接:https://www.zhihu.com/question/39813913/answer/104275537来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  4. 使用UTF8字符集存储中文生僻字

    使用UTF8字符集存储中文生僻字 一.相关学习BLOG https://www.cnblogs.com/jyzhao/p/8654412.html http://blog.itpub.net/7818 ...

  5. 01背包变种 第k解问题 hdu 2639

    先说说普通01包的状态问题吧 普通的01背包,在状态转移的过程中为了求出最优解,一定是遍历了所有的情况 然后再求的最优解.那么对于第k最优解问题,我们只需要再加一个维度,用来记录每一个状态k优解的状态 ...

  6. 使用 ElasticSearch Aggregations 进行统计分析（转）

    https://blog.csdn.net/cs729298/article/details/68926969 ElasticSearch 的特点随处可见:基于 Lucene 的分布式搜索引擎,友好的 ...

  7. vue在axios中 this 指向问题

    1.解决办法 在vue中使用axios做网络请求的时候,会遇到this不指向vue,而为undefined,可以使用箭头函数"=>"来解决.如下: methods: { lo ...

  8. # marshalsec使用

    开启rmi服务,恶意类放到服务上 D:\jdk_1.8\bin\java.exe -cp marshalsec-0.0.3-SNAPSHOT-all.jar marshalsec.jndi.RMIRe ...

  9. git的使用（win7 64位）

    下载安装 1.官方下载网址:https://git-scm.com/downloads: 2.安装十分简单,按照默认配置,一直点击next,最后点击install,即安装成功: 3.安装成功之后,则自 ...

  10. 3.Java集合-HashSet实现原理及源码分析

    一.HashSet概述: HashSet实现Set接口,由哈希表(实际上是一个HashMap实例)支持,它不保证set的迭代顺序很久不变.此类允许使用null元素 二.HashSet的实现: 对于Ha ...