console
var dashboard = document.getElementById("dashboard")
dashboard.addEventListener("dragover", function (e) {
e.preventDefault()
e.stopPropagation()
})
dashboard.addEventListener("dragenter", function (e) {
e.preventDefault()
e.stopPropagation()
})
dashboard.addEventListener("drop", function (e) {
// 必须要禁用浏览器默认事件
e.preventDefault()
e.stopPropagation()
var files = e.dataTransfer.files; //获取文件对象
var fileUrl = window.URL.createObjectURL(files[0]);
if (files[0].type.indexOf('image') === 0) {
showFileInfo(fileUrl, '0');
} else if (files[0].type.indexOf('css') > -1) {
showFileInfo(fileUrl, '-50px 0px');
} else if (files[0].type.indexOf('javascript') > -1) {
showFileInfo(fileUrl, '0 0 ');
} else {
console.log(files[0].type);
$('#fileInfo').hide();
$('#intro').hide();
$('#notSupport').show();
$('#uploaded').hide();
}
function showFileInfo(url, pos) {
$('#intro').hide();
var logo = document.getElementById('fileLogo');
if (pos === '0') {
logo.src = url;
logo.style.display = "inline-block";
document.getElementById('fileLogo2').style.display = "none";
} else {
logo.style.display = "none";
var logo = document.getElementById('fileLogo2');
logo.style.display = "inline-block";
logo.style.backgroundPosition = pos;
}
$('#notSupport').hide();
$('#fileInfo').show();
$('#fileName').html( files[0].name);
var size = parseInt(files[0].size / 1000);
if (size == 0) {
size = 1;
}
document.getElementById('fileSize').innerHTML = size + 'KB';
$("#fileInfo .btn").click(function (){
$('#fileInfo').hide();
$("#uploading").show();
setTimeout(function(){
$("#uploading").hide();
$("#uploaded").show();
},1000);
});
}
})
<h1>JSRUN 上传文件控件DEMO</h1>
<div class="container">
<div id="dashboard" class="dashboard">
<div id="intro">拖拽文件到这里上传</div>
<div id="notSupport">不支持上传此类型文件</div>
<div id="uploading""> 文件上传中 </div>
<div id="uploaded""> 文件上传成功 </div>
<div id="fileInfo">
<img id="fileLogo" width='200px' />
<div id="fileLogo2"></div>
<div class="info">
文件名: <span id="fileName"></span> <br>
大小:<span id="fileSize"></span> <br>
<div class='btn'>上传</div>
</div>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
}
h1 {
width: 100%;
text-align: center;
margin-top: 10px;
font-size: 14px;
color: #aaa;
}
.container {
width: 400px;
height: 160px;
padding: 15px;
margin: 20px auto 0;
border-radius: 10px;
background-color: #ffffff;
}
.dashboard {
width: 100%;
height: 100%;
box-sizing: border-box;
border: 2px dashed rgb(236, 236, 236);
border-radius: 5px;
}
.dashboard #intro, #uploading, #notSupport {
color: rgb(206, 206, 206);
display: block;
text-align: center;
line-height: 150px;
font-size: 20px;
}
#notSupport, #uploading,#uploaded{
display: none;
}
.dashboard img {
width: 80px;
max-height: 80px;
margin-top: 30px;
margin-left: 30px;
border: 3px solid #fff;
border-radius: 10px;
box-shadow: 0 0 5px #00000054;
}
.dashboard .info {
float: right;
padding: 30px;
font-size: 14px;
color: #757575;
}
#fileInfo {
display: none;
}
#fileLogo2 { margin-top: 52px;
margin-left: 50px;
display: none;
width:50px;
height:50px;
background-image: url(//cdn.jsrun.top/css/img/app_logo.png?v=2) ;
background-size: 750px auto ;
}
.dashboard .info .btn {
background: #ffbc31;
color: #FFF;
text-align: center;
padding: 6px;
border-radius: 5px;
margin-top: 20px;
cursor: default;
}
[draggable] {
/*防止可拖曳元素的文字被选中*/
-webkit-user-select: none;
user-select: none;
/*可以拖曳的元素通常鼠标是十字形*/
cursor: pointer;
}