主要用的是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. 如何在JIRA中有效使用关注和@提及 我正在关注的问题 提及我的问题 在仪表板上显示

    如何在JIRA中有效使用关注和@提及http://bbs.51testing.com/forum.php?mod=viewthread&tid=1157043&fromuid=1530 ...

  2. Java自学-数字与字符串 字符串转换

    Java中把数字转换为字符串,字符串转换为数字 步骤 1 : 数字转字符串 方法1: 使用String类的静态方法valueOf 方法2: 先把基本类型装箱为对象,然后调用对象的toString pa ...

  3. 编写可维护的JavaScript-随笔（一）

    一.基本的格式化 1. 缩进层级 a)      制表符缩进 i.          好处:制表符和缩进层级是一对一的关系是符合逻辑的,文本编辑器可以配置制表符的展示长度,可以随意调节 ii.     ...

  4. vue打包后页面显示空白但是不报错

    在使用vue打包的时候页面显示空白,并且控制台不报错 设置vue-router的时候mode设置为history模式了,这种模式要有后台的配合,一般还是使用哈希模式就不会出现页面空白了.

  5. markdown 格式测试

    Q1: before 与 afer 的而区别在哪? Q2: 如何预防"爆仓"? Q3: 在购买量 much > 库存量 num时, 把much自动改为num? -- 在t2的 ...

  6. python 导入导出依赖包命令

    程序中必须包含一个 requirements.txt 文件,用于记录所有依赖包及其精确的版本号.如果 要在另一台电脑上重新生成虚拟环境,这个文件的重要性就体现出来了,例如部署程序时 使用的电脑.pip ...

  7. 实战 MySQL 8.0.17 Clone Plugin（转）

    背景 很神奇,5.7.17 和 8.0.17,连续两个17小版本都让人眼前一亮.前者加入了组复制(Group Replication)功能,后者加入了克隆插件(Clone Plugin)功能.今天我们 ...

  8. 基于gin框架搭建的一个简单的web服务

    刚把go编程基础知识学习完了,学习的时间很短,可能还有的没有完全吸收.不过还是在项目中发现知识,然后在去回顾已学的知识,现在利用gin这个web框架做一个简单的CRUD操作. 1.Go Web框架的技 ...

  9. K-th Path CodeForces - 1196F

    题目链接:https://vjudge.net/problem/CodeForces-1196F 题意:从图中找出第K短的最短路,最短路:从一个点到另一个的最短距离. 思路:题目说了,每两个点之间的边 ...

  10. splunk dga

    https://splunkbase.splunk.com/app/3559/ 详细参考: https://www.slideshare.net/Splunk/using-machine-learni ...