<!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. Zookeeper Java API调用

    引入zookeeper-3.4.11.jar public class ZooKeeperTest implements Watcher{ //public final static String z ...

  2. NET设计模式 第二部分 行为型模式(18)：观察者模式（Observer Pattern）

    概述 在软件构建过程中,我们需要为某些对象建立一种“通知依赖关系” ——一个对象(目标对象)的状态发生改变,所有的依赖对象(观察者对象)都将得到通知.如果这样的依赖关系过于紧密,将使软件不能很好地抵御 ...

  3. Abp问题解决集合1

    ABP学习经验 1.   视图中(控制器中直接使用仓储)会遇到使用实体外键,出现数据库连接关闭的错误 初学者经常会犯这样一个错误,没错说的就是我自己,这个问题折腾了我很长世间.还是没有细看文档,对ab ...

  4. PHP 中 call_user_func 函数 和 call_user_func_array 函数的区别

    PHP 中 call_user_func() 函数 和 call_user_func_array() 函数都是回调函数,在写接口的时候经常会用到,但是他们有什么区别呢? 它们的第一个参数都是被调用的回 ...

  5. button高度改变

    代码:<input type="button" name="submit" value="submit" /> 利用css改变b ...

  6. Opencv 视频保存为图像

    // 视频存为图片.cpp : 定义控制台应用程序的入口点. // /*================================================================ ...

  7. 纯css实现

    实现此效果 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22  <!DOCTYPE html><html lang=& ...

  8. LeetCode——11. Container With Most Water

    一.题目链接:https://leetcode.com/problems/container-with-most-water/ 二.题目大意: 给定n个非负整数a1,a2....an:其中每一个整数对 ...

  9. TCP/IP学习20180626-数据链路层

    数据链路层有三个目的: 为IP模块发送和 接收IP数据报. 为ARP模块发送ARP请求和接收ARP应答. 为RARP发送RARP请 求和接收RARP应答 ip大家都听说过. ARP叫做地址解析协议,是 ...

  10. 客户端负载均衡Feign之一：申明式服务调用Feign入门示例

    Spring Cloud提供了Ribbon和Feign作为客户端的负载均衡. 前面使用了Ribbon做客户端负载均衡,使用Hystrix做容错保护,这两者被作为基础工具类框架被广泛地应用在各个微服务的 ...