单文件上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>单文件上传</h1>
<form action="/single" method="POST" enctype="multipart/form-data">
<p>请选择上传文件: <input type="file" name="avatar"></p>
<p><input type="submit" value="上传"></p>
</form>
</body>
</html>
多文件上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>多文件上传</h1>
<form action="/multiple" method="post" enctype="multipart/form-data">
<p>请选择上传文件:
<input type="file" name="avatar" multiple><br>
<input type="file" name="avatar" multiple><br>
<input type="file" name="avatar" multiple><br>
</p>
<p><input type="submit" value="上传"></p>
</form>
</body>
</html>
自定义多文件上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>自定义多文件上传</h1>
<form action="/custom`" method="post" enctype="multipart/form-data">
<p>请选择上传文件:
<input type="file" name="avatar" multiple><br>
<input type="file" name="avatar" multiple><br>
<input type="file" name="avatar" multiple><br>
</p>
<p><input type="submit" value="上传"></p>
</form>
</body>
</html>
拖拽上传
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖动上传</title>
<link rel="stylesheet" type="text/css" href="styles/reset.css">
<style>
body{
font-family: Roboto, sans-serif;
color: #0f3c4b;
background-color: #e5edf1;
padding:20px;
}
.container {
width: 100%;
max-width: 680px;
text-align: center;
margin: 0 auto;
}
#drop-region {
position: relative;
background-color: #fff;
border-radius:5px;
box-shadow:0 0 35px rgba(0,0,0,0.05);
padding:60px 40px;
text-align: center;
cursor:pointer;
transition:.3s;
}
#progress{
position: absolute;
left:0;
top:50%;
width:0;
height:5px;
background:#f00;
}
</style>
</head>
<body>
<div class="container">
<div id="drop-region">
拖动上传
<div id="progress"></div>
</div>
</div>
<script src="scripts/axios.min.js">
</script>
<script>
let targetEle = document.getElementById('drop-region');
targetEle.ondragover = (event)=>{
event.stopPropagation();
event.preventDefault();
}
targetEle.ondrop = (event)=>{
event.stopPropagation();
event.preventDefault()
let filelist = event.dataTransfer.files;
console.log(filelist);
let form = new FormData();
if (filelist.length >= 1) {
for (var n = 0; n < filelist.length; n++){
form.append('face',filelist[n]);
}
axios.post('http://127.0.0.1:3000/drag',form);
}
}
</script>
</body>
</html>
