<!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. py-day1-4 python基本数据类型2

    # replace 替换 text = 'xiaomafafafahaoyunlianlian' v = text.replace('fa','shun') x = text.replace('fa' ...

  2. C++ Builder使用VC DLL

    好久没用BCB了,真的有些陌生了,当然个烂笔头吧. 1 先 implib c:\xxx.lib c:\xxx.dll 生成lib文件 2 #pragma comment(lib,"xxx.l ...

  3. Hadoop JAVA HDFS客户端操作

    JAVA HDFS客户端操作 通过API操作HDFS org.apache.logging.log4jlog4j-core2.8.2org.apache.hadoophadoop-common${ha ...

  4. oracle删除表垃圾

    1,完全删除表: drop table 表名 purge; 2,删除表后永久删除-回收站表 purge table 表名: 3,清空垃圾回收站 purge recyclebin; 4, 查询所有此类表 ...

  5. xe5 android 控制蓝牙[转]

    用以下代码中的接口实现控制蓝牙的开.关及详细信息 unit Androidapi.JNI.BluetoothAdapter; // (c) RedTitan Technology 2013// JNI ...

  6. Azure SQL Database (26) 使用Query Store对Azure SQL Database监控

    <Windows Azure Platform 系列文章目录> 我们在使用Azure SQL Database的时候,需要对数据库的性能进行监控,这时候就可以有两种方法: 1.第一种方法, ...

  7. Osip2和eXosip协议栈的简析

    Osip2是一个开放源代码的sip协议栈,是开源代码中不多使用C语言写的协议栈之一,它具有短小简洁的特点,专注于sip底层解析使得它的效率比较高. eXosip是Osip2的一个扩展协议集,它部分封装 ...

  8. 一篇对OAuth2.0开发实例的介绍

    今天看到了博友对SSO的文章,SSO单点登录的讲解突然想写一篇关于OAuth2.0用户授权的介绍. 应用场景:在APP或者网页接入一些第三方应用时,时长会需要用户登录另一个合作平台,比如QQ,微博,微 ...

  9. 峰Redis学习（9）Redis 集群(概述)

    第一节:Redis 集群概述 redis cluster是去中心化,去中间件的,也就是说,集群中的每个节点都是平等的关系,都是对等的,每个节点都保存各自的数据和整个集群的状态.每个节点都和其他所有节点 ...

  10. python 数组或列表维度增加

    怎么把[,,,,]变成[[],[],[],[],[]]???