<!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>

js 原生图片上传的更多相关文章

  1. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  2. js判断图片上传时的文件大小，和宽高尺寸

    今天在做图片上传的小功能,使用了一个kissy上传组件.很好奇它是如何在图片上传前,检测到图片的大小和尺寸的?我们来写个小实例实现一下吧 如何读取图片的size 首先,原生input file控件有个 ...

  3. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

  4. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

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

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

  6. PHP+js实现图片上传，编辑

    文件上传,点击按钮并选择文件后,文件会临时存到一个位置,会有一个临时名字: 然后在php文件中处理,给文件起名并将文件从临时为止搬到服务器,把需要的文件信息返回给前端页面: 最后表单提交时,把文件信息 ...

  7. html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  8. js压缩图片上传插件localResizeIMG

    示例 /** * 本地图片压缩后上传 */ $("#vfile").change(function(){ var _this = $(this); lrz(this.files[0 ...

  9. 基于cropper.js的图片上传和裁剪

    项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...

随机推荐

  1. c#多线程与委托（转）

    一:线程在.net中提供了两种启动线程的方式,一种是不带参数的启动方式,另一种是带参数的启动的方式.不带参数的启动方式 如果启动参数时无需其它额外的信息,可以使用ThreadStart来实例化Thre ...

  2. spring-AOP框架（基于AspectJ注解配置AOP）

    基于AspectJ注解配置AOP 1.加入jar包: 要在Spring应用中使用AspectJ注解,必须在classpath下包含AspectJ类库:aopalliance.jar.aspectj.w ...

  3. Quartz定时任务详解一

    以下是我在应用的的一个基本配置: #---------调度器属性---------------- org.quartz.scheduler.instanceName = TestScheduler o ...

  4. MySQL+MyBatis下批量修改数据的问题

    今天处理数据批量的更新,场景是这样子的,web站管理的字典功能,需要添加一个记录的整体描述,以及详细内容的描述.一个字典整体概述只有一组信息,但是其详细内容,会有很多项,不确定. 这个场景,在关系型数 ...

  5. hyperledge fabric里order-kafka过程分析

    Broadcast主要接收Peer的数据并在Orderer里面生成一系列数据块,主要流程见下图: Broadcast过程分析:Peer(客户端)通过GRPC发起通信,与Orderer连接成功之后,便可 ...

  6. 页面框架加载完自动执行函数$(function(){});

    页面中有一些大的资源文件,如图片,声音等,如果一个事件绑定写在这些加载资源代码的下方,那么要等资源加载完才会绑定,这样体验不够好. 于是想不等资源加载完,只要框架加载完成就绑定事件,就可以把代码放在以 ...

  7. linux 内存映射-ioremap和mmap函数

    最近开始学习Linux驱动程序,将内存映射和ioremap,mmap函数相关资料进行了整理 一,内存映射  对于提供了MMU(存储管理器,辅助操作系统进行内存管理,提供虚实地址转换等硬件支持)的处理器 ...

  8. CreateUserWizard控件的使用

    “CreateUserWizard”控件用于收集潜在用户所提供的信息.默认情况下,“CreateUserWizard”控件会将新用户添加到 ASP.NET 成员身份系统中.有关 ASP.NET 成员资 ...

  9. java中的强,软,弱,虚引用

    引用的应用场景 我们都知道垃圾回收器会回收符合回收条件的对象的内存,但并不是所有的程序员都知道回收条件取决于指向该对象的引用类型.这正是Java中弱引用和软引用的主要区别. 如果一个对象只有弱引用指向 ...

  10. Hard commits, soft commits and transaction logs

    “Hard commits are about durability, soft commits are about visibility“  Transaction Logs 首先介绍下solrcl ...