主要用的是html5的文件系统部分：

<html>

<head>

<meta name="viewport" content="width=device-width, minimum-scale=0.1">

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<title>xxx</title>

<script src="im.js"></script>

<script>

function handleFiles(files) {

  var preview = document.getElementById('preview');

  for (var i = 0; i < files.length; i++) {

    var file = files[i];

    var imageType = /^image\//;

    if ( !imageType.test(file.type) ) {

      continue;

    }

    var img = document.createElement("img");

    img.classList.add("obj");

    img.file = file;

    // 假设 "preview" 是将要展示图片的 div

    preview.appendChild(img);

    var reader = new FileReader();

    reader.onload = (function(aImg) {

      return function(e) {

        aImg.src = e.target.result;

      };

    })(img);

    reader.readAsDataURL(file);

  }

}

</script>

</head>

<body style="margin: 25px;">

<input type="file" id="input" onchange="handleFiles(this.files)">

<div id = "preview"></div>

<!-- <img src="file:///Users/staff/Desktop/%E5%9C%B0%E8%A1%A8.png" width="2500" height="650"> -->

</body>

</html>

参考：

https://developer.mozilla.org/zh-CN/docs/Using_files_from_web_applications

http://hushicai.com/2014/03/29/html5-du-qu-ben-di-wen-jian.html

http://www.html5rocks.com/zh/tutorials/file/filesystem/#toc-file

html 选择本地图片，显示选择的图片的更多相关文章

  1. discuz x3.3排行首页图片显示更多的图片

    找到\source\include\misc\misc_ranklist_index.php文件,修改41行 $ranklist = getranklist_pictures_index(9); 为 ...

  2. 转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

    转载  原文:http://www.divcss5.com/wenji/w732.shtml 原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形. 二.使用布局技术   -    ...

  3. java查询图片显示无图片显示项目默认图片

    /** * 读取图片 * @param request * @param record * @return */ @RequestMapping(params ="method=queryW ...

  4. 使用input选择本地图片，并且实现预览功能

    1.使用input标签选择本地图片文件 用一个盒子来存放预览的图片 2.JS实现预览 首先添加一个input change事件,再用到 URL.createObjectURL() 方法 用来创建 UR ...

  5. 移动端H5选择本地图片

    移动端H5选择本地图片 html://input<input type="file" accept="image/*" capture="cam ...

  6. 选择本地照片之后即显示在Img中(客户体验)

    最近转战MVC项目,然后又再次遇到照片上传的实现,之前都是使用ASP.NET,虽然也有照片上传,而且出于客户体验考虑, 也实现了选择本地照片之后即时显示在IMG中,在这里就简单介绍其实现(ASP.NE ...

  7. 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]

    原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就 ...

  8. 前端H5，点击选择图片控件，图片直接在页面上展示~

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JS预览图像将本地图片显示到浏览器上的代码

    js代码实现: 从file域获取本地图片url并将本地图片显示到浏览器上. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  10. JS预览图像将本地图片显示到浏览器上

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

随机推荐

  1. Mycat分布式数据库架构解决方案--Mycat实现数据库分表

    echo编辑整理,欢迎转载,转载请声明文章来源.欢迎添加echo微信(微信号:t2421499075)交流学习. 百战不败,依不自称常胜,百败不颓,依能奋力前行.--这才是真正的堪称强大!!! 准备工 ...

  2. 阿里熔断限流Sentinel研究

    1. 阿里熔断限流Sentinel研究 1.1. 功能特点 丰富的应用场景:例如秒杀(即突发流量控制在系统容量可以承受的范围).消息削峰填谷.集群流量控制.实时熔断下游不可用应用等 完备的实时监控:S ...

  3. HTML5深入学习之鼠标跟随，拖拽事件

    知识点(鼠标跟随): mousedown: 当用户用鼠标点击在某一元素上就会触发该事件 mouseover:  当鼠标指针在某一元素上移动就会触发改事件 下面这个例子的效果就是鼠标点击元素后,元素跟着 ...

  4. android启动时间慢的问题

     [转]对于Android的性能这方面评估,大部分都是有超级兔子去比跑分的,还是不能反映全面的问题.就我知道的而言,应用启动时间是很影响用户体验的一个性能方面问题. 最近的一个项目,别人都说应用启动慢 ...

  5. Android-----spinner组件使用（实现下单）

    list view组件和spinner组件使用方法类似,从string.xml中通过entries获取数据显示.但如果要显示的列表项无法在执行前确定,或是要在程序执行的过程中变更选项内容,通过entr ...

  6. springboot如何读取配置文件中的参数（例如：application-consts.properties） 又结合maven读取配置文件的顺序

    1.启动项目后,会读取pom.xml中的配置文件,例如现在读取的是本地配置 2.找到对应的配置文件  会读取uri地址下的配置.注:如果为springboot启动无需加config项目的名称,应该本身 ...

  7. Python装饰器与闭包

    闭包是Python装饰器的基础.要理解闭包,先要了解Python中的变量作用域规则. 变量作用域规则 首先,在函数中是能访问全局变量的: >>> a = 'global var' & ...

  8. 内核中dump_stack的实现原理（2） —— symbol

    环境 Linux-4.14 Aarch64   正文 在前面的分析中调用print_symbol("PC is at %s\n", instruction_pointer(regs ...

  9. Web服务基础介绍

    Web服务基础介绍 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.正常情况下的单次web服务访问流程 博主推荐阅读: https://www.cnblogs.com/yinzh ...

  10. 转，关于TCP粘包问题的一些思路

    TCP粘包分析 一 .两个简单概念长连接与短连接:1.长连接 Client方与Server方先建立通讯连接,连接建立后不断开, 然后再进行报文发送和接收. 2.短连接 Client方与Server每进 ...