主要用的是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. 时间格式在ios和安卓兼容性的问题：

    在做项目时,在时间显示上遇到一个问题,取后台返回的时间时,在ios手机上时间不显示,安卓手机正常,最后通过Vconsole工具发现,ios不能支持用“—”分割的时间,此外后台返回的时间格式为x年x月x ...

  2. Vue.js前端MVVM框架实战篇

    相信大家对vue.js这个前端框架有了一定的了解.想必也想把Vue急切的运用在项目中,看看它的魅力到底有多大?别急,今天我会满足大家的想法. 我们一起来看看“Webpack+Vue”的开发模式相比以往 ...

  3. FreeRTOS 任务通知模拟消息邮箱

    举例 void task1_task(void *pvParameters) { u8 key; BaseType_t err; while(1) { key=KEY_Scan(0); //扫描按键 ...

  4. easyui datagrid Column Group 列组、 复杂表头 嵌套表头 组合表头 （转载）

    核心: rowspan:2   //占两行 colspan:3    //占三列 所有的colspan下的二级列表头,统一放在一个数组里. 文章一: 转载来源:https://blog.csdn.ne ...

  5. JavaScript基础内容中的函数详解

    函数 函数:即方法 函数就是一段预先设置的功能代码块,可以反复调用,根据输入参数的不同,返回不同的值. 为什么使用函数: 1.方便调用 2.代码重用,利于维护 3.便于修改,便于重构 4.简化逻辑,利 ...

  6. free - 显示系统内存信息

    free - Display amount of free and used memory in the system 显示系统中空闲和已使用内存的数量 格式: free [options] opti ...

  7. spring cloud微服务实战教程/pdf/视频/百度云资源

    资源站:http://www.supan.vip 点击进入直接查找资源: http://www.supan.vip/spring%20cloud微服务实战 <Spring Cloud微服务实战& ...

  8. SqlServer中的更新锁(UPDLOCK和READPAST)

    UPDLOCK和READPAST,通过UPDLOCK和READPAST的结合我们能够解决许多问题,比如我当前项目中对于更新预约人数,则用到了UPDLOCK和READPAST,因为考虑到并发如果固定预约 ...

  9. Apache JMeter系列.1

    最爱看统计 --01-- 简介 Apache JMeter Apache JMeter可用于测试静态和动态资源(文件,Servlet,Perl脚本,Java对象,数据库和查询,FTP服务器等)的性能. ...

  10. Java Spring Boot 一些调试技巧

    配置文件的管理 有的时候我们希望开发环境和测试环境的配置文件放在一起可以快速切换 spring boot 为我们提供了很方便的的选项 在 application.properties 中只需要添加属性 ...