<input type="file" value="上傳"> 拖拽或點擊上傳(在safari瀏覽器不支持拖拽),主要解決safari瀏覽器的拖拽問題
jsp頁面
<input type="file" id="frontImg" name="myfiles" style="display:none;">
<div class="seam-upload" id="upload">
<img id="upload" src="${path }/image/product/seam-upload.png">
<h4 id="addproduct">點擊添加產品</h4>
</div>
css美化拖拽或點擊上傳區域
.seam-upload {width: 200px; height: 300px; background: rgba(0,152,221,1); box-shadow: 0px 5px 8px 0px rgba(0, 0, 0, 0.44); border-radius: 6px; text-align: center; float: left; margin-right: 21px; margin-bottom: 50px;
}
seam-upload h4 { font-size: 18px; font-family: MicrosoftYaHeiLight; font-weight: 300; color: rgba(255,255,255,1);}
js功能實現
<script type="text/javascript">
//監聽拖拽事件
document.addEventListener("drop",function(e){ //拖離
e.preventDefault();
})
document.addEventListener("dragleave",function(e){ //拖後放
e.preventDefault();
})
document.addEventListener("dragenter",function(e){ //拖進
e.preventDefault();
})
document.addEventListener("dragover",function(e){ //拖來拖去
e.preventDefault();
})
/* 拖拽上傳 */
var box = document.getElementById('upload'); //拖拽區域
box.addEventListener("drop",function(e){
var fileList = e.dataTransfer.files; //獲取文件對象
ajaxFileUpload(fileList);//將文件上傳
});
/*點擊轉移,確保拖拽的文件和點擊的文件是同一部分*/
$("#upload").click(function(){
return $("#frontImg").click();
});
$("#frontImg").on("change",function (e) {
var e = e || window.event;
//獲取 文件 個數 取消的時候使用
var fileList = e.target.files;
if(files.length>0){
// 獲取文件名 並顯示文件名
ajaxFileUpload(fileList );
}else{
//清空文件名
$("#frontImg").val("");
}
});
/*上傳方法,根據需要上傳*/
function ajaxFileUpload(obj) {
}
</script>