from 默认的上传模式
多文件上传
https://segmentfault.com/a/1190000006716454
enctype=”application/x-www-form-urlencoded”>
<form action="server/upload.php" method="post" enctype="application/x-www-form-urlencoded"><input type="text" name="filename"><br /><input type="file" name="file"><br /><input type="submit" value="上传" /></form>
多文件上传
同步方式
enctype=”multipart/form-data
input type = “file” name=”file[]” multiple 属性
<form action="server/m_upload.php" method="post" enctype="multipart/form-data">
<input type="text" name="filename"><br />
<input type="file" name="file[]" multiple><br />
<input type="submit" value="上传" />
</form>
方法二：多个输入框
<form action="server/upload.php" method="post" enctype="multipart/form-data">
<input type="text" name="filename"><br />
<input type="file" name="file[]"><br />
<input type="file" name="file[]"><br />
<input type="file" name="file[]"><br />
<input type="file" name="file[]"><br />
<input type="file" name="file[]"><br />
<input type="submit" value="上传" />
</form>
FormData.append()
FormData.set()
FormData.get()
FormData.getAll()
FormData.delete()
var oUsername = document.getElementById('username'),
oPassword = document.getElementById('password'),
oSubmitBtn = document.getElementById('submitBtn'),
fd = new FormData();
oSubmitBtn.onclick = function () {
fd.append('Username', '赵六');
fd.append('Password', '888');
fd.append('Username', '王五');
fd.append('Password', '456');
console.log(fd); // FormData{}
console.log('username:' + fd.get('Username'));
console.log('username:' + fd.getAll('Username'));
console.log('password:' + fd.get('Password'));
fd.set('Username', '李四');
console.log('username:' + fd.get('Username'));
console.log('username:' + fd.getAll('Username'));
console.log(fd.has('Password'));
fd.delete('Password');
console.log('password：' + fd.get('Password'));
实战
多文件上传精简版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
padding: 0;
margin: 0;
margin-top: 100px;
list-style: none;
}
.progress-bar {
position: relative;
width: 300px;
height: 40px;
border: 1px solid #666;
}
.progress {
width: 0;
height: 100%;
background-color: green;
}
.error-info {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 40px;
font-size: 14px;
}
</style>
</head>
<body>
<input type="file" id="file" multiple />
<input type="submit" id="submitBtn" value="上传" />
<ul id="progress-wrap">
<li class="progress-bar">
<div class="progress"></div>
</li>
</ul>
</body>
<script>
var oSubmitBtn = document.getElementById('submitBtn'),
oFile = document.getElementById('file'),
oProgressWrap = document.getElementById('progress-wrap');
oFile.onchange = function () {
console.log(oFile.files);
var files = oFile.files,
fileLen = files.length; //获取上传文件的数量
var fd = new FormData();
for (var i = 0; i < fileLen; i++) {
fd.set('file', files[i]);
var o = window.XMLHttpRequest ?
new window.XMLHttpRequest() :
new ActiveXObject('Microsoft.XMLHTTP');
if (!o) {
throw new Error('您的浏览器不支持AJAX异步发起HTTP请求');
}
o.open('post', 'server/upload.php');
// console.log(fd);
console.log(fd.getAll("file"));
o.send(fd);
}
console.log(fd.getAll("file"));
}
</script>
</html>
多文件上传详细版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
padding: 0;
margin: 0;
margin-top: 100px;
list-style: none;
}
.progress-bar {
position: relative;
width: 300px;
height: 40px;
border: 1px solid #666;
}
.progress {
width: 0;
height: 100%;
background-color: green;
}
.error-info {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
line-height: 40px;
font-size: 14px;
}
</style>
</head>
<body>
<input type="file" id="file" multiple />
<input type="submit" id="submitBtn" value="上传" />
<ul id="progress-wrap">
<li class="progress-bar">
<div class="progress"></div>
</li>
</ul>
</body>
<script>
var oSubmitBtn = document.getElementById('submitBtn'),
oFile = document.getElementById('file'),
oProgressWrap = document.getElementById('progress-wrap');
oFile.onchange = function () {
console.log(oFile.files);
var files = oFile.files,
fileLen = files.length; //获取上传文件的数量
if (fileLen > 5) {
console.log(new Error('最多可同时上传5张图片'));
return;
}
oProgressWrap.innerHTML = '' //有新的上传则清空现有的进度条
var fileName = '',
maxSize = 3221225472,
fd = null,
errorInfo = '';
for (var i = 0; i < fileLen; i++) {
fileName = files[i].name.toLowerCase(),
fileSize = files[i].size;
if (!/\.(gif|jpg|jpeg|png)$/.test(fileName)) {
errorInfo = '『' + fileName + '』文件不是图片类型';
}
// if (!/\.(mp4)$/.test(fileName)) {
// errorInfo = '『' + fileName + '』文件不是mp4类型';
// }
if (fileSize > maxSize) {
errorInfo = '『' + fileName + '』超过最大大小';
}
var oProgressBar = document.createElement('li'); //创建li
oProgressBar.className = 'progress-bar';
oProgressWrap.appendChild(oProgressBar); //将创建的li元素添加道ul oProgressWrap 上
// 如果有错误提示则显示错误提示
if (errorInfo !== '') {
oProgressBar.innerHTML = '<span class="error-info>' + errorInfo + '</span>'
} else {
oProgressBar.innerHTML = '<div class="progress"></div>'
fd = new FormData();
fd.append('file', files[i]);
var o = window.XMLHttpRequest ?
new window.XMLHttpRequest() :
new ActiveXObject('Microsoft.XMLHTTP');
if (!o) {
throw new Error('您的浏览器不支持AJAX异步发起HTTP请求');
}
o.open('post', 'server/upload.php');
(function (i) {
// 数据传输中
o.upload.onprogress = function (e) {
var e = e || window.event,
percent = e.loaded / e.total * 100 + '%',
thisProgressBar = oProgressWrap.getElementsByClassName('progress-bar')[i];
thisProgressBar.getElementsByClassName('progress')[0].style.width = percent;
}
})(i);
console.log(fd);
o.send(fd);
}
}
}
</script>
</html>
若有收获，就点个赞吧
0 人点赞
