文章标题

来源：互联网发布：pppoe网络编辑：程序博客网时间：2024/06/14 16:59

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

0 0