主要用的是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. 把EXECL表格导入到WORD中

    一般我们在编写开发文档时需要进行表格导入导出,这里提供几种方法供参考. 法一: 打开EXECL,WORD软件,在需要导入表格的地方选择“插入” ,找到“对象选项: ”在对象对话框中点击“由文件创建”, ...

  2. Vue搭建脚手架1

    Vue2.0搭建Vue脚手架(vue-cli) 此文章参考了网上一些前人的技术分享,自己拿过来总结一下.此文章是基于webpack构建的vue项目,并实现简单的单页面应用.其中利用到的相关技术会简单加 ...

  3. Jest单元测试进阶

    Jest 命令行窗口中的指令 在学习Jest单元测试入门的时候,给Jest命令提供了一个参数 --watchAll, 让它监听测试文件或测试文件引入的文件的变化,从而时时进行测试.但这样做也带来一个问 ...

  4. Java 之 数学相关类 Math、BigInteger、BigDecimal

    一.java.lang.Math 类 一.Math 类概述 java.lang.Math 类包含用于执行基本数学运算的方法,如指数.对数.平方根和三角函数.类似于这样的类,其所有方法均为静态方法,并且 ...

  5. JavaScript 运算符（Operator）

    一.算数运算符 1.加法(+) 表示操作数相加:  处理特殊值规则: 如果两个操作数都是字符串,则将第二个操作数与第一个操作数拼接起来: 如果只有一个操作数是字符串,则将另一个操作数转换为字符串,然后 ...

  6. Palo Alto GlobalProtect上的PreAuth RCE

    0x00 前言 SSL VPN虽然可以保护企业资产免受互联网被攻击的风险影响,但如果SSL VPN本身容易受到攻击呢?它们暴露在互联网上,可以可靠并安全地连接到内网中.一旦SSL VPN服务器遭到入侵 ...

  7. 搭建idea出现无法自动映射Mapper问题

    org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) 如出这种问题,导致的原因是mapp.xm ...

  8. Linux命令passwd

    passwd 简单说明:passwd命令的用法也很多,我们只选如下的几个参数加以说明:想了解更多,请参考man passwd或passwd --help :passwd [OPTION...] pas ...

  9. 【RabbitMQ】RabbitMQ的安装以及基本概念的介绍

    一.如何安装 https://www.cnblogs.com/756623607-zhang/p/11469962.html 二.基本概念介绍 ·Broker:可以理解为消息队列服务器的实体,它是一个 ...

  10. Linux centos关机和重启命令

    Linux centos重启命令: 1.reboot   普通重启 2.shutdown -r now 立刻重启(root用户使用) 3.shutdown -r 10 过10分钟自动重启(root用户 ...