<!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. SDRAM单字写操作

    SDRAM单字写操作 1.单字写操作时序 2.写verilog程序体会 在初始状态,先写好跳转条件.If()....else... 3.通过仿顺序操作来实现连续写操作 首先完成单字写操作,然后跳转到下 ...

  2. sqlalchemy操作----多表关联

    有二张表,一张作者表,一张书表,一个作者写多本书,一本书可以由多个作者写,与是通过新加一张关系表把他们联系起来 #!/usr/bin/env python # -*- coding: utf-8 -* ...

  3. excel技巧--复制带excel侧边的表格

    假设要复制出带excel侧边的表格内容,则使用以下步骤: 1.选择要复制的表格: 2.选择“页面布局”->“标题”选项的“打印”打勾: 3.选择“开始”->复制旁的三角选项:复制为图片: ...

  4. mysql5.7 主从同步

    一:进行bin-log日志配置 1设置bin-log日志 [mysqld] log-bin=//路径  #<===红色的加粗的省去 server-id = 1    #主库 2.检查配置登录数据 ...

  5. PI接口无法使用.net4以上的解决方法：无法嵌入互操作类型“PISDKClass”。请改用适用的接口。

    Interop type 'PISDKClass' cannot be embedded. Use the applicable interface instead. .net开发中,有时候在引用某些 ...

  6. js写法【3】

    var m=[]; m[m.length]=xx;//相当于push 对Repeat方法提供了8种写法做比较,这一点还是不错的.

  7. Ubuntu 14.10 下Eclipse操作HBase

    环境介绍 64位Ubuntu14.10,Hadoop 2.5.0 ,HBase 0.99.0 准备环境 1 安装Hadoop 2.5.0,可参考http://www.cnblogs.com/liuch ...

  8. bzoj5052: 繁忙的财政官

    求区间内相差最小的两个数的差 分sqrt(n)块,预处理两个数在块内,以及一个数在块内一个数在零散部分的情况,询问时归并排序处理两个数都在零散部分的情况,时间复杂度$O((n+q)\sqrt{n})$ ...

  9. 【Web前端】清除css、javascript及背景图在浏览器中的缓存

    在实际项目开发过过程中,页面是上传到服务器上的.而为了减少服务器的压力,让用户少加载,浏览器会将图片.css.js缓存到本地中,以便下次访问网站时使用.这样做不仅减少了服务器的压力,并且也减少了用户的 ...

  10. Underscore.js(1.9.1) 封装库

    // Underscore.js 1.9.1// http://underscorejs.org// (c) 2009-2018 Jeremy Ashkenas, DocumentCloud and ...