文章标题

html文件

<div class="updatebox">
<label for="dateup" class="dropbox" id="drop_zone">
<span class="droptip">拖拽文件到这里</span>
<img src="img/plus.png" />
</label>
<div class="upfilebox">
<input type="file" id="dateup" name="file" />
<label for="dateup">本地文件上传</label>
</div>
</div>

css文件
.updatebox {
width: 60%;
margin: 0 auto;
text-align: center;
border: 1px solid #31B0D5;
border-top: none;
padding: 15px 0;
display: none;
}

        .dropbox {
            width: 90%;
            margin: auto;
            margin-bottom: 15px;
            background: #DBDBDB;
            text-align: center;
            height: 100px;
            overflow: hidden;
        }

        .dropbox span {
            display: inline-block;
            width: 100%;
            padding: 10px 0;
        }

        .dropbox img {
            width: 40px;
            height: 40px;
            display: inline-block;
        }

        .upfilebox {
            position: relative;
            display: inline-block;
        }

        .upfilebox input {
            width: 100px;
            height: 45px;
            position: relative;
            z-index: 9;
            opacity: 0;
        }

        .upfilebox label {
            position: absolute;
            background: cornflowerblue;
            display: inline-block;
            color: #fff;
            width: 100px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            top: 0px;
            left: 0px;
        }

        .admininfo {
            display: none;
        }

        .adminlog {
            cursor: pointer;
        }

        #loginModal {
            color: #000000;
        }

        .bg {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            display: none;
            position: fixed;
            left: 0;
            top: 0;
        }

js文件

    var postUrl = "http://193.168.15.60:3333/";
    var dropisshow=true;
    var infodata;
    function init(){
        var dropZone = document.getElementById('drop_zone');
        searchFile($(".searchText").val())
        if(dropZone){
            dropZone.addEventListener('drop', handleFileDrop, false);
            dropZone.addEventListener('dragover', handleFileDragOver, false);
            dateup();
            upDataclick();
        }

    }
    function searchFile(data){

            $(".searchSubmit").click(function() {
                data=data||$(".searchText").val()
            var md5 =data;
        var selectValue = $(".reportSelect").val();
        if(md5 != undefined && md5 != "") {
            //          if(selectValue == "relation") {
            //              window.location.href = "listten.html?search=" + md5 + "&selectValue=" + selectValue;
            //          } 
            window.location.href = "listten.html?search=" + encodeURIComponent(md5) + "&selectValue=" + selectValue;
        }
    })
    $(".searchText").keydown(function(event) {
data=data||$(".searchText").val()
        if(event.keyCode == 13) {
            var md5 = data;
            var selectValue = $(".reportSelect").val();
            if(md5 != undefined && md5 != "") {
                window.location.href = "listten.html?search=" + encodeURIComponent(md5) + "&selectValue=" + selectValue;
            }
        }
    });
    }

            function uploadFile(file) {
              var formData = new FormData();
                formData.append('file', file);
                $.ajax({
                    url: 'http://193.168.15.60:9999/upload',
                    type: 'POST',
                    data: formData,
                    // async: false,
                    cache: false,
                    contentType: false,
                    processData: false,
                    beforeSend:function(){
                        $(".bg").show();
                        $('.droptip').html("上传中>>>>>>");
                    },
                    success: function(data) {

                        $(".bg").hide();

                        if(200 === data.code) {
                            $('.droptip').html("上传成功！");
                            if(dropisshow==false){
                                infodata=data.data;
                                 searchFile(infodata);
                             }

                        } else {
                            $('.droptip').html("上传失败,请重新上传");
                        }

                    },
                    error: function() {
                        $(".droptip").html("与服务器通信发生错误");
                    }
                });
            }


            function handleFileDrop(e) {
                e.stopPropagation();
                e.preventDefault();
                var  files = e.dataTransfer.files;

                if(files.length == 0||files.length>1||files[0].type==null){
                    $('.droptip').html("请上传一个文件，不支持压缩包 文件夹以及多个文件！");

                } else{
                     uploadFile(files[0])
               var filename = files[0].name;
                $('.searchText').val(filename)
                }

            }
            function dateup(){
                $("#dateup").change(()=>{
                    var fileId=document.getElementById("dateup")
                    var filedata=fileId.files[0]
                    if(fileId.files.length == 0||fileId.files.length>1||fileId.files[0].type==null){
                    $('.droptip').html("请上传一个文件，不支持压缩包 文件夹以及多个文件！");
                  return false; 
               } 
                    var f=$("#dateup").val();

                    thisFile=fileId.files[0].name;
                    $('.searchText').val(thisFile)
                    uploadFile(filedata)
                })
            }
function upDataclick(){

    $('.updatePic').click(function(){      
        if(dropisshow==true){
            dropshow()              
            dropisshow=false;
        }else{
            dropisshow=true;
            dropHide();
            searchFile()
        }
    })
}
           function dropshow(){
              $('.updatebox').show();
              $('.searchText').attr('readonly','readonly')
           }
           function dropHide(){
             $('.updatebox').hide()
             $('.searchText').removeAttr('readonly')
           }
            function handleFileDragOver(e) {
                e.stopPropagation();
                e.preventDefault();
                e.dataTransfer.dropEffect = 'copy';
            }