html5 图片上传 预览

<html>
<body>
<fieldset>
<legend>测试</legend>
<div class="form-group">
<div class="img-preview rl">
<form id="index_form1" name="index_form1" role="form" method="post" enctype="multipart/form-data" style="float: left;">

<div class="mui-col-xs-4 img-upload mui-text-center iconfont icon-shangchuantupian rl mui-pull-left" id="picone" style="background-image: url(imgs/andd.png);background-size:cover ;">
<span style="font-size: 15px; padding-left: 20px; position: absolute; float: left; margin-top: 104px;">测试</span>
<input type="file" class="wid-100 ab file" id="uploadpic1" name="uploadpic1"  capture="camera"   accept="image/*"  οnchange='doChange(this)'; />

<div class="mui-clearfix"></div>
</div>

</form>

</div>
</div>
</fieldset>

<img id="img1" src="a.jpg" style="width:200px;height:200px"/>
</body>
</html>

 

<script>
if (typeof FileReader == 'undefined') {
alert("抱歉,你的浏览器不支持FileReader");
}
function doChange(obj)
{
html5ImgLocalReader('uploadpic1', 'img1');
}
function html5ImgLocalReader(fileId, imgId) {
var file1 = document.getElementById(fileId);
var file = file1.files[0];    
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
document.getElementById(imgId).src=this.result;
//document.getElementById(imgId).style.backgroundImage = "url(" this.result ")";
}
}
</script>

  

From:http://www.cnblogs.com/xuejianxiyang/p/6845162.html

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368634.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用selenium前学习HTML(3)— 属性

<!--HTML标签可以拥有属性&#xff0c;属性提供元素的更多的信息&#xff1b;属性总是以名称/值对的形式出现&#xff0c;比如&#xff1a;name"value"。属性总是在 HTML 元素的开始标签中规定。 --><!DOCTYPE html> <html lang"en"> &l…

k3 Bos开发百问百答

K/3 BOS开发百问百答 &#xff08;版本&#xff1a;V1.1&#xff09; K3产品市场部 目录 一、基础资料篇__ 1 【摘要】bos基础资料的显示问题_ 1 【摘要】单据自定义无法看到bos定义的基础资料_ 1 【摘要】在调出基础资料序时簿时&#xff0c;过滤出我需要的基础资料_ 1 【摘要…

计算机架构专业排名,全国大学计算机专业排名(转贴)

4 东北大学 A 081201计算机系统结构 081200计算机科学与技术 08工学5 西安交通大学 A 081201计算机系统结构 081200计算机科学与技术08工学6 复旦大学 A 081201计算机系统结构 081200计算机科学与技术 08工学7 中国科学技术大学 A 081201计算机系统结构 081200计算机科学与技术…

Spring MVC,Ajax和JSON第2部分–服务器端代码

在上一个博客中&#xff0c;我说过我将谈论Spring&#xff0c;Ajax和JSON&#xff0c;但是没有。 原因是我想使用&#xff08;很少&#xff09;可信的购物网站场景来设置场景。 在这种情况下&#xff0c;当用户单击“电子商务”页面链接时&#xff0c;服务器应用程序将加载目录…

Python模块学习之解决selenium的“can't access dead object”错误

问题描述 在python执行过程中&#xff0c;提示selenium.common.exceptions.WebDriverException: Message: TypeError: cant access dead object 原因 原因是代码中用到了frame,获取元素前需要切换到frame才能定位到元素&#xff0c;否则无法定位到元素 解决方法 在查找元素前加…

初中生学计算机网络应用怎么样,初中生读计算机网络技术专业怎么样?小编解答...

初中生读计算机网络技术专业怎么样?可以这样说&#xff0c;计算机网络技术专业在众多专业当中来说&#xff0c;也是一个发展得比较不错的专业&#xff0c;而且现在也有很多高职学校都开设有计算机网络技术专业&#xff0c;那么初中生读计算机网络技术专业怎么样?计算机网络技…

类的无参方法和Doc注释

一:Java Doc注释: 语法: /** *AccpSchool 类 *author JadeBird *version 1.0 2018/5/26 */ Java Doc是前Sun公司提供的一种技术,它能够从程序代码中抽取类,方法,成员等的注释,形成一个和源代码配套的API帮助文档(简答地说,就是介绍该类,类的方法和成员变量的文档). 因此只要在编…

html/css学习笔记(一)

盒子模型1.background 1.1background-colorbackground-image: url("");background-repeatbackground-size: &#xff08;x轴的比例 y轴的比例&#xff09;background-positionbackground-attachment:fixed;(背景图固定不滚动)1.2 复合写法background: color iamge po…

Spring MVC,Ajax和JSON第3部分–客户端代码

如果您一直关注有关Spring&#xff0c;Ajax和JSON的简短博客系列&#xff0c;那么您会回想起我到目前为止已经创建了一个Spring MVC Web应用程序&#xff0c;该应用程序显示一个表单&#xff0c;该表单允许用户选择一堆项目并向服务器提交购买请求。 然后&#xff0c;服务器用一…

[poj] 3090 Visible Lattice Points

原题 欧拉函数 我们发现&#xff0c;对于每一个斜率来说&#xff0c;这条直线上的点&#xff0c;只有gcd(x,y)1时可行&#xff0c;所以求欧拉函数的前缀和。2*f[n]1即为答案。 #include<cstdio> #define N 1010 using namespace std; int x,y,n,f[N],m;int read() {int a…

10个必知的网页设计术语计算机与网络,计算机网络专业毕业论文-网页设计与制作(23页)-原创力文档...

安徽工业经济职业技术学院毕业论文PAGEPAGE 4-安徽工业经济职业技术学院毕业论文(设计)论文题目&#xff1a; 网页设计与制作系 部&#xff1a; 计算机科学技术系专业名称&#xff1a; 计算机网络技术论文作者&#xff1a; 李婷婷指导教师&#xff1a; 宋多琳2014年4月12日摘 要…

笔记36 Spring Web Flow——配置

Spring Web Flow是一个Web框架&#xff0c;它适用于元素按规定流程运行的程序。Spring Web Flow是Spring MVC的扩展&#xff0c;它支持开发基于流程的应用程 序。它将流程的定义与实现流程行为的类和视图分离开来。在介绍Spring Web Flow的时候&#xff0c;我们将暂时放下Spitt…

一些关于Viewport与device-width的东西~(转)

内容转自 http://www.cnblogs.com/koukouyifan/p/4066567.html 非常感谢 口口一凡 为我们提供的这篇文章&#xff0c;受益匪浅&#xff0c;特地转到自己的博客收藏起来。 以下是原文内容。 进行移动web开发已经有一年多的时间了&#xff0c;期间遇到了一些令人很困惑的东西。…

创建委托登录模块(用于JBoss EAP 6.1)

[如果只想查看代码&#xff0c;请向下滚动] 动机 在RHQ中&#xff0c;我们需要一个安全域&#xff0c;该域可用于通过容器管理的安全性来保护REST-api及其Web应用程序。 过去&#xff0c;我只是使用经典的DatabaseServerLoginModule对DatabaseServerLoginModule进行身份验证。 …

【C++】开源:FLTK图形界面库配置与使用

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍FLTK图形界面库配置与使用。 无专精则不能成&#xff0c;无涉猎则不能通。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0…

蜗牛学院:中国人,努力获得了荣誉却要压抑克制

上周&#xff0c;在取得双11三连冠的佳绩之后&#xff0c;百雀羚顺势推出了一支视频广告《你应该骄傲》。 广告内容感动了无数人&#xff0c;并在广告圈和自媒体引发了持续刷屏。&#xff08;视频见文末&#xff09; 从《一九三一》到《韩梅梅快跑》&#xff0c;百雀羚今年多次…

html 访问节点,HTML DOM 访问节点

getElementById() 和 getElementsByTagName()getElementById() 和 getElementsByTagName() 这两种方法&#xff0c;可查找整个 HTML 文档中的任何 HTML 元素。这两种方法会忽略文档的结构。假如您希望查找文档中所有的元素&#xff0c;getElementsByTagName() 会把它们全部找到…

CSS3圆圈动画放大缩小循环动画效果

代码如下&#xff1a; <!DOCTYPE html> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <title>CSS3圆圈动画放大缩小循环动画效果</title> <style>.dot { margin:150px a…

【BZOJ3589】动态树

题解&#xff1a;转载于:https://www.cnblogs.com/yinwuxiao/p/9103046.html

Lambda表达式在Java 8中的简单应用

我一直试图在我编写的代码中放入lambda表达式&#xff0c;而这个简单的例子就是相同的结果。 对于那些完全不了解Java中的Lambda表达式的人&#xff0c;我建议他们在进入本文之前先阅读此内容 。 好的&#xff0c;现在您已经熟悉了Lambda表达式&#xff08;在阅读了介绍性文章…