前端H5,点击选择图片控件,图片直接在页面上展示~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="upload_box">
<b>上传图片</b>
<input type="file" name="file" id="file" accept="image/*" onchange="imgChange(this);"/> <!--文件上传选择按钮-->
<div id="preview">
<img id="imghead" src=""/> <!--图片显示位置-->
</div>
</div> </body>
</html>
<script type="text/javascript">
// 选择图片显示
function imgChange(obj) {
//获取点击的文本框
var file = document.getElementById("file");
var imgUrl = window.URL.createObjectURL(file.files[0]);
var img = document.getElementById('imghead');
img.setAttribute('src', imgUrl); // 修改img标签src属性值
};
</script>
前端H5,点击选择图片控件,图片直接在页面上展示~的更多相关文章
- MFC编程入门之二十七(常用控件:图片控件PictureControl)
上一节讲的是滚动条控件,本节主要讲一种简单实用的控件,图片控件Picture Control.我们可以在界面某个位置放入图片控件,显示图片以美化界面. 图片控件简介 图片控件和前面讲到的静态文本框都是 ...
- VS2010/MFC常用控件:图片控件Picture Control
图片控件Picture Control 本节主要讲一种简单实用的控件,图片控件Picture Control.我们可以在界面某个位置放入图片控件,显示图片以美化界面. 图片控件简介 图片控件和前面讲到 ...
- MFC 对话框Picture Control(图片控件)中静态和动态显示Bmp图片
版权声明:本文为博主原创文章,转载请注明CSDN博客源地址! 共同学习,一起进步~ https://blog.csdn.net/Eastmount/article/details/26404733 ...
- VS2010/MFC编程入门之二十七(常用控件:图片控件Picture Control)
上一节中鸡啄米讲的是滚动条控件,本节主要讲一种简单实用的控件,图片控件Picture Control.我们可以在界面某个位置放入图片控件,显示图片以美化界面. 图片控件简介 图片控件和前面讲到的静态文 ...
- VS2010-MFC(常用控件:图片控件Picture Control)
转自:http://www.jizhuomi.com/software/193.html 本节主要讲一种简单实用的控件,图片控件Picture Control.我们可以在界面某个位置放入图片控件,显示 ...
- swing实现QQ登录界面1.0( 实现了同一张图片只加载一次)、(以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件)
swing实现QQ登录界面1.0( 实现了同一张图片只加载一次).(以及实现简单的布局面板添加背景图片控件的标签控件和添加一个关闭按钮控件) 代码思路分析: 1.(同一张图片仅仅需要加载一次就够了,下 ...
- Flex自定义组件开发之日周月日期选择日历控件
原文:Flex自定义组件开发之日周月日期选择日历控件 使用过DateField的我们都知道,DateField 控件是用于显示日期的文本字段,字段右侧带有日历图标.当用户在控件边框内的 ...
- 解决WPF两个图片控件显示相同图片因线程占用,其中一个显示不全的问题
在做项目的过程中遇到这样一个问题,下面提出一种解决方法,主要思想是图片的Copy,如还有其他方法,欢迎交流. 在前端图片控件绑定显示时,使用转换器进行转义绑定 (1)转换器: public cla ...
- 关于web开发前端h5框架的选择
关于web开发前端h5框架的选择 看了很多移动版框架都是基于app混合式开发的,不是单独h5网站的基于h5开发的web框架从组件丰富度,兼容性,相关教程来说bootstrap还是最好的react和vu ...
- wxPython缩放图片控件的一个小例子
前几天写程序的时候,想有个自适应的图片控件,但是一直没有找到合适的解决方案.今天终于解决了这个问题,发在这里,以供参考. 程序截图: 文件下载地址: http://files.cnblogs.com/ ...
随机推荐
- LIS 问题
#include<cstdio> #include<iostream> #include<algorithm> #include<queue> #inc ...
- Div水平垂直居中的三种方法
百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...
- php中级程序员的进化标准
1 熟悉linux/unix操作系统,能够写些shell脚本2 能够搭建lamp环境3 熟练使用php,了解或使用过php扩展模块,使用过开源的php框架4 熟悉缓存技术,包括http协议的缓存,利用 ...
- mycat(读写分离、负载均衡、主从切换)
博主本人平和谦逊,热爱学习,读者阅读过程中发现错误的地方,请帮忙指出,感激不尽 1.环境准备 1.1新增两台虚拟机 mycat01:192.168.247.81 mycat02:192.168.247 ...
- python语法基础-常用模块-re模块
############### re模块 ################ 正则表达式的规则: # re模块 # 正则表达式,就是做字符串匹配的,在re模块出现之前就有这个正则表达式了,任 ...
- 安装oracle 11g 客户端,检查过程中报物理内存不足的解决
今早接到同事电话,说安装oracle 11g客户端的时候,在检查先决条件的时候,报错,说内存不足,但是本机的内存是2G,肯定够用:如图: 找了一圈,原来Oracle执行先决条件检查是依赖c$共享,很多 ...
- insecticide|contradictions| at large|delay doing|
N-MASS 杀虫剂;杀虫药Insecticide is a chemical substance that is used to kill insects. Spray the plants wit ...
- montagy
因为只是想分享ghcjs和webgl的使用经验,所以很多地方说的很粗,因为涉及的知识确实很多, 推荐两本书,一本haskell基础的 learn you a haskell for great goo ...
- 转:Zabbix-3.0.x使用OneAlert发送告警
转自: http://blog.sina.com.cn/s/blog_87113ac20102w7il.html ( 标签: onealert 分类: zab OneAlert 是国内首个 Saa ...
- 使用内网映射工具Holer将本地的Web应用映射到公网上访问
Holer exposes local servers behind NATs and firewalls to the public internet over secure tunnels. Su ...