上传并查看图片

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>

查看全文

相关阅读:
SQLServer 备份和还原
 Ling To DataTable
asp.net安全防范
 SQLServer 定时备份(一)
asp.net网站安全常见问题与防范
 SQLServer 定时备份(二)
flex大法：一网打尽所有常见布局
 BetterScroll源码阅读顺便学习TypeScript
快速搭建一个代码在线编辑预览工具
 一个简单标注库的插件化开发实践

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