<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>
