廢話不多說，直接上代碼：
<body>
<input type="file" name="file" class="fileBtn" onchange="showPreview(this)" onmouseover="showImg()" onmouseout="hideImg()"/>
<span class="btn-text" id="pic">選擇圖檔</span>
<div class="view-box" id="viewBox">
<img id="preview" width=300/>
</div>
<script type="text/javascript">
function showPreview(source){
var file = source.files[];
if(!file){
alert('請先上傳圖檔');
}
if (file.type == "image/jpeg" || file.type == "image/png") {
if(window.FileReader){
var fr = new FileReader();
fr.onloadend = function(e){
var img = new Image();
img.src=e.target.result;
imgWidth = img.width;
imgHeight = img.height;
imgSize = file.size;
if(judgeImg(imgWidth,imgHeight,imgSize)){ //檢測圖檔尺寸
document.getElementById('pic').innerHTML=file.name;
document.getElementById('preview').src=e.target.result;
doUploadFile(file,imgWidth, imgHeight, imgSize)//與伺服器互動
};
}
fr.readAsDataURL(file);
}
}else{
alert('檔案格式有誤');
}
}
function judgeImg(imgWidth,imgHeight,imgSize){
if(imgWidth>){alert('這裡對圖檔寬度進行限定');return;}
if(imgHeight>){alert('這裡對圖檔高度進行限定');return;}
if(imgSize>*){alert('這裡對圖檔尺寸進行限定');return;}
return true;
}
function doUploadFile(file,width, height, fileSize){
var form = new FormData();
form.append("fileName", file.name); // 可以增加表單資料
form.append("fileSize", file.size); // 可以增加表單資料
form.append("file", file);
var req = new XMLHttpRequest();
req.open("post", imgUrl);
req.send(form);
req.onreadystatechange = function () {
if (req.readyState == && req.status == ) {
var data = JSON.parse(req.responseText);
if (data.errorCode == ) {
//上傳圖檔成功
} else {
//上傳圖檔失敗
}
}
};
}
function showImg(){
if(document.getElementById('preview').src){
document.getElementById('viewBox').style.opacity=;
}
}
function hideImg(){
document.getElementById('viewBox').style.opacity=;
}
</script>
<style>
.fileBtn{
opacity:;
position:relative;
z-index:;
cursor:pointer }
.btn-text{
position:relative;
color:green;
left:-px;
}
.view-box{
width:px;
border:solid px #ccc;
opacity:;
}
</style>
</body>
![【每日一練】59—寫一個中秋月餅的響應式卡片[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)