<!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. Jmeter学习—004—使用代理录制脚本—HTTP代理服务器（APP、web皆可）

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/mmmmmmm_2niu/article/details/78136253记得我最开始使用jmeter ...

  2. python 字符串格式化—format

    Python2.6 开始,新增了一种格式化字符串的函数 str.format().使用起来简单方便,不会遇到使用%时候格式的选择问题. 按照参数默认顺序 >>> "yesd ...

  3. spring boot打jar包（maven对jar和lib分离）

    spring boot intellij Ide打包有两种方式: 1.maven:熟悉.方便配置灵活 2.Build artifacts:操作比较复杂,jar和lib包分离 重点讲maven如何支持j ...

  4. jQuery位置操作

    position();获取当前标签相对于最近一个父标签中有positon:relative属性的位置. height();标签纯高度 innerHeight();标签内边距padding加上纯高度 o ...

  5. awk 文本处理工具

    awk: 强大的文本处理工具,擅长对日志文件进行分析: 不仅用于Linux,也是任何环境中现在的功能最强大的数据处理引擎: 语法说明: awk '{pattern + action}' {filena ...

  6. 找不到 EntityType “ ” 的映射和元数据信息。

    意思是: 数据库里边有添加的新字段DB1,而程序中的的实体即“元数据”中没有这个新字段Et1,由于EntityFramework更新模型时已自动默认对DB1和Et1进行了映射(默认认为实体中存在这个字 ...

  7. 【maven】之打包不带版本号的问题

    今天在写maven项目的时候发现打包没有带版本号,只有包名 百思不得其解,我翻看之前的项目发现并没有这种情况,最后看了一下文档 发现是自己在build中写了fileName  导致的!删除自定义的fi ...

  8. 求1~n整数中1出现的次数(《剑指offer》面试题43)

    题意: 给定一个整数n,求1~n这n个整数中十进制表示中1出现的次数. 思路: 方法1:最直观的是,对于1~n中的每个整数,分别判断n中的1的个数,具体见<剑指offer>.这种方法的时间 ...

  9. 安卓模拟器错误 PANIC: Could not open

    最近在配置Android环境的时候着实让我迷惘了许久,最主要的一个问题就是在创建AVD的时候,出现如下问题: PANIC: Could not open ***

  10. 使用jquery.mCustomScrollbar自定义滚动条（1）

    参考博客:https://blog.csdn.net/cdnight/article/details/41351505 api网址:http://manos.malihu.gr/jquery-cust ...