文章标题

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