上传并查看图片

zoukankan html css js c++ java

上传并查看图片

<!DOCTYPE html>  <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>

查看全文

相关阅读:
嵌入式成长轨迹27 【Linux应用编程强化】【中嵌第二阶段】【进程管理】
嵌入式成长轨迹24【Linux应用编程强化】【Linux下的C编程下】【实例：Linux命令实现】
纯CSS代码实现翻页
 Adodb.Stream读取和写入UTF8编码的文件
 对c#拆装箱的性能分析（泛型）
js自动更换图片代码（收藏）
提高网站可用性的10个小技巧
 分享下我的家乡语言——湘潭话
 解析用户研究
 HTML5 搭建移动Web应用

原文地址：https://www.cnblogs.com/yyl001/p/15699687.html