html 选择本地图片,显示选择的图片
主要用的是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 选择本地图片,显示选择的图片的更多相关文章
- discuz x3.3排行首页图片显示更多的图片
找到\source\include\misc\misc_ranklist_index.php文件,修改41行 $ranklist = getranklist_pictures_index(9); 为 ...
- 转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
转载 原文:http://www.divcss5.com/wenji/w732.shtml 原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形. 二.使用布局技术 - ...
- java查询图片显示无图片显示项目默认图片
/** * 读取图片 * @param request * @param record * @return */ @RequestMapping(params ="method=queryW ...
- 使用input选择本地图片,并且实现预览功能
1.使用input标签选择本地图片文件 用一个盒子来存放预览的图片 2.JS实现预览 首先添加一个input change事件,再用到 URL.createObjectURL() 方法 用来创建 UR ...
- 移动端H5选择本地图片
移动端H5选择本地图片 html://input<input type="file" accept="image/*" capture="cam ...
- 选择本地照片之后即显示在Img中(客户体验)
最近转战MVC项目,然后又再次遇到照片上传的实现,之前都是使用ASP.NET,虽然也有照片上传,而且出于客户体验考虑, 也实现了选择本地照片之后即时显示在IMG中,在这里就简单介绍其实现(ASP.NE ...
- 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]
原文:http://blog.csdn.net/sinat_17775997/article/details/58585142 之前用Vue做了一个基础的组件 vue-img-inputer ,下面就 ...
- 前端H5,点击选择图片控件,图片直接在页面上展示~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS预览图像将本地图片显示到浏览器上的代码
js代码实现: 从file域获取本地图片url并将本地图片显示到浏览器上. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- JS预览图像将本地图片显示到浏览器上
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
随机推荐
- 如何在JIRA中有效使用关注和@提及 我正在关注的问题 提及我的问题 在仪表板上显示
如何在JIRA中有效使用关注和@提及http://bbs.51testing.com/forum.php?mod=viewthread&tid=1157043&fromuid=1530 ...
- Java自学-数字与字符串 字符串转换
Java中把数字转换为字符串,字符串转换为数字 步骤 1 : 数字转字符串 方法1: 使用String类的静态方法valueOf 方法2: 先把基本类型装箱为对象,然后调用对象的toString pa ...
- 编写可维护的JavaScript-随笔(一)
一.基本的格式化 1. 缩进层级 a) 制表符缩进 i. 好处:制表符和缩进层级是一对一的关系是符合逻辑的,文本编辑器可以配置制表符的展示长度,可以随意调节 ii. ...
- vue打包后页面显示空白但是不报错
在使用vue打包的时候页面显示空白,并且控制台不报错 设置vue-router的时候mode设置为history模式了,这种模式要有后台的配合,一般还是使用哈希模式就不会出现页面空白了.
- markdown 格式测试
Q1: before 与 afer 的而区别在哪? Q2: 如何预防"爆仓"? Q3: 在购买量 much > 库存量 num时, 把much自动改为num? -- 在t2的 ...
- python 导入导出依赖包命令
程序中必须包含一个 requirements.txt 文件,用于记录所有依赖包及其精确的版本号.如果 要在另一台电脑上重新生成虚拟环境,这个文件的重要性就体现出来了,例如部署程序时 使用的电脑.pip ...
- 实战 MySQL 8.0.17 Clone Plugin(转)
背景 很神奇,5.7.17 和 8.0.17,连续两个17小版本都让人眼前一亮.前者加入了组复制(Group Replication)功能,后者加入了克隆插件(Clone Plugin)功能.今天我们 ...
- 基于gin框架搭建的一个简单的web服务
刚把go编程基础知识学习完了,学习的时间很短,可能还有的没有完全吸收.不过还是在项目中发现知识,然后在去回顾已学的知识,现在利用gin这个web框架做一个简单的CRUD操作. 1.Go Web框架的技 ...
- K-th Path CodeForces - 1196F
题目链接:https://vjudge.net/problem/CodeForces-1196F 题意:从图中找出第K短的最短路,最短路:从一个点到另一个的最短距离. 思路:题目说了,每两个点之间的边 ...
- splunk dga
https://splunkbase.splunk.com/app/3559/ 详细参考: https://www.slideshare.net/Splunk/using-machine-learni ...