JS如何上傳並在網頁顯示圖片


剛才沒事研究了一下怎么JavaScript 怎么上傳圖片...算是以后用到可以直接黏貼吧哈哈


<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上傳圖片</title>
</head>
<body>
<div class="yanzRight">
<input name="evidence" onchange="uploadImg(this,'preview')" type="file"/>
<span class="dui" id="imgOrder_dui" style="display: none;"></span>
</div>
<div id="preview">
<img src="" alt="" id="imghead5" height="200" width="200" />
</div>

</body>

<script>
function uploadImg(file,imgNum){
var widthImg = 200; //顯示圖片的width
var heightImg = 200; //顯示圖片的height
var div = document.getElementById(imgNum);
if (file.files && file.files[0]){
div.innerHTML ='<img id="upImg">'; //生成圖片
var img = document.getElementById('upImg'); //獲得用戶上傳的圖片節點
img.onload = function(){
img.width = widthImg;
img.height = heightImg;
}
var reader = new FileReader(); //判斷圖片是否加載完畢
reader.onload = function(evt){
if(reader.readyState === 2){ //加載完畢后賦值
img.src = evt.target.result;
}
}
reader.readAsDataURL(file.files[0]);
}
}
</script>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM