一、代碼
css樣式
<style type="text/css">
.box {
width: 300px;
height: 300px;
margin: auto;
box-sizing: border-box;
position: relative;
border: 3px dashed gainsboro;
}
.Original_img {
width: 295px;
height: 295px;
}
#sel_file {
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
z-index: 2;
opacity: 0;
}
h2{
text-align: center;
}
</style>
body內容：
<body>
<h2>點擊或者拖拽上傳</h2>
<div class="box">
<img src="img/upload.png" class="Original_img" />
<input type="file" id="sel_file" value="選擇文件" />
</div>
</body>
js部分及jquery引入
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var sel_file = document.querySelector("#sel_file");
var Original_img = document.querySelector(".Original_img");
sel_file.onchange = function(e) {
var newimg = e.target.files[0];
upimg(newimg);
}
//拖拽上傳
var imgbox = document.querySelector(".box");
//拖拽元素在在放置區域移動
imgbox.ondragover = function() {
return false;
}
imgbox.ondrop = function(e) {
upimg(e.dataTransfer.files[0])
return false;
}
//封裝函數
function upimg(newimg) {
//實例化文件對象(構造函數)
var fileReader = new FileReader();
fileReader.readAsDataURL(newimg)
fileReader.onload = function(e) {
//把加號替換成上傳圖片的路徑
Original_img.src = e.target.result;
Original_img.style.width = "295px";
Original_img.style.height = "295px";
}
}
</script>
二、最終效果如下：
效果一：
效果二：
如有出入，歡迎留言指正！