zoukankan
html css js c++ java
上传并查看图片
<!DOCTYPE html> <!-- saved from url=(0034)http://localhost:61694/Image/Index --> <html style="" class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers no-applicationcache svg inlinesvg smil svgclippaths"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <pre><code><meta name="viewport" content="width=device-width"> <title></title> <link href="./Index_files/bootstrap.css" rel="stylesheet"> </code></pre> <link href="./Index_files/site.css" rel="stylesheet"> <pre><code><script src="./Index_files/modernizr-2.8.3.js.下载"></script> </code></pre> </head> <body> <style> .must{ color:red; font-size:14px; } .userImg1{ 240px; height:135px; display: inline-block; background-color: #f3f5f4; text-align: center; line-height: 135px; vertical-align: top; margin-top:13px; margin-left:8px; cursor:pointer; } .userImg1{ background-size: 240px 135px; } .sub-btn{ 92px; height:35px; background-color: #e1251a; display: block; margin:25px 0 0 94px; border:none; outline: none; color:#fff; cursor:pointer; } input[type="file"] { display: none; } </style> <pre><code><div> <h1>图片选择</h1> <div class="userImg1" onclick="uploadFile('userImg1')" style="background-image: url("blob:http://localhost:61694/5f866f8a-7399-4b10-9870-74e34a237b49");">+添加图片</div> <input type="file" name="uploadImg1" display="none" class="fileBtn" accept="image/*" onchange="dofileBtn(this)"> </div> </code></pre> <script src="./Index_files/jquery-3.3.1.js.下载"></script> <script type="text/javascript"> var fileBtn = document.getElementsByClassName("fileBtn"); function dofileBtn(e) { const fileObj = e.files[0]; const windowURL = window.URL || window.webkitURL; if (fileBtn && fileObj) { const imgURL = window.URL.createObjectURL(fileObj); $(".userImg1").css("background-image", "url(" + imgURL + ")"); } } function uploadFile(e) { $(".fileBtn").click(); } $(".fileBtn").on("change", dofileBtn); </script> <pre><code></div> </code></pre> </body></html>
查看全文
相关阅读:
BZOJ4849[Neerc2016]Mole Tunnels——模拟费用流+树形DP
BZOJ3638[Codeforces280D]k-Maximum Subsequence Sum&BZOJ3272Zgg吃东西&BZOJ3267KC采花——模拟费用流+线段树
BZOJ3291Alice与能源计划——匈牙利算法+模拟费用流
BZOJ2151种树——模拟费用流+链表+堆
CF1117D Magic Gems
CF1117C Magic Ship
CF1117A Best Subsegment
Loj 2028 随机序列
Loj 504 ZQC的手办
Luogu 3806 点分治1
原文地址:https://www.cnblogs.com/yyl001/p/15699687.html
最新文章
Android: 实现一个计算器 -- (四则运算)
JavaWeb学习(七): Statement 与 PreparedStatement 的区别 :
JavaWeb学习(六) : JDBC 访问数据库 (MySql,Oracle,SQLserver)
AtCoder Beginner Contest 158 题解报告
JavaWeb学习(五) : 九大内置对象
AtCoder Beginner Contest 157 题解报告
JavaWeb学习(四) : JSP 基本语法
Codeforces Round #622(Div 2)C2. Skyscrapers (hard version)
Codeforces Round #622(Div 2) C1. Skyscrapers (easy version)
小白月赛22 G : 仓库地址
热门文章
BZOJ4356Ceoi2014 Wall——堆优化dijkstra+最短路树
BZOJ4519[Cqoi2016]不同的最小割——最小割树+map
BZOJ2229[Zjoi2011]最小割——最小割树
[Codeforces266E]More Queries to Array...——线段树
[Codeforces235D]Graph Game——概率与期望+基环树+容斥
[Codeforces261D]Maxim and Increasing Subsequence——树状数组+DP
BTREE——动态点分治+虚树+可持久化线段树+容斥
[UOJ455][UER #8]雪灾与外卖——堆+模拟费用流
BZOJ4946[Noi2017]蔬菜——线段树+堆+模拟费用流
BZOJ3502PA2012Tanie linie&BZOJ2288[POJ Challenge]生日礼物——模拟费用流+链表+堆
Copyright © 2011-2022 走看看