主要用的是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. Tigase XMPP Server

    Tigase XMPP Server是我们的旗舰服务器端软件,提供XMPP服务或实例通信(IC)服务.最基本的解释是Tigase是一个聊天服务器,但它远不止于此.聊天是其可能的应用程序之一,但任何类型 ...

  2. java基础小练习,1-打印一百次(1~10)的随机数,2-固定一个随机数(1~100)，然后猜出他,3-定义以指定格式打印集合(ArrayList类型作为参数)，使用{}括起来，使用@代替,分隔每个元素

    推荐自己码一下,可以使用别的方法,面向对象,不需要注重过程 /* 题目:我需要打印一百次(1~10)的随机数 */ import java.util.Random; public class demo ...

  3. javaScript 一些小技巧

    日历 创建过去七天的数组,如果将代码中的减号换成加号,你将得到未来7天的数组集合 // 创建过去七天的数组 [...Array(7).keys()].map(days => new Date(D ...

  4. HTML5 多媒体标签

    一.多媒体 embed 标签 embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.MP3等等.url为音频或视频文件及其路径,可以是相对路径或绝对路径. 语法格式: < ...

  5. SSM相关知识梳理面试

  6. 搭建前端监控系统（六）JS截屏和录屏篇

    怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后.错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决 ...

  7. C#的静态类

    静态类 静态类与非静态类的重要区别在于静态类不能实例化,也就是说,不能使用 new 关键字创建静态类类型的变量.在声明一个类时使用static关键字,具有两个方面的意义:首先,它防止程序员写代码来实例 ...

  8. 分页查询——Hibernate Criteria实现一次查询取得总记录数和分页后结果集

    使用Hibernate criteria进行分页查询时,如何实现一次查询取得总记录数和分页后结果集 - bto310 - ITeye博客 https://bto310.iteye.com/blog/1 ...

  9. ansible-playbook安装zabbix_server，agent监控

    主要完成通过playbook自动生成zabbix_server,agent,这里没有完全实现自动化,这里机器的获取还是需要人为手工填写,如果感兴趣想通过自动获取需要部署的机器可以通过namp扫描工具a ...

  10. V-rep（1）

    第一次课堂作业,需要导入网格三维模型,对齐坐标系,然后在各个关节添加jiont,实现外观模型和运动仿真模型的分离. 1.首先导入模型.导入模型可能是一个整体模型(装配好的),也可能是单个(mesh)网 ...