上傳並檢視圖片
<!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">
<meta name="viewport" content="width=device-width">
<title></title>
<link href="./Index_files/bootstrap.css" rel="stylesheet">
<link href="./Index_files/site.css" rel="stylesheet">
<script src="./Index_files/modernizr-2.8.3.js.下載"></script>
</head>
<body>
<style>
.must{
color:red;
font-size:14px;
}
.userImg1{
width: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{
width: 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>
<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>
<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>
</div>
</body></html>