SOURCE

console 命令行工具 X clear

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

本项目引用的自定义外部资源