FormData单文件异步上传
formdata.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<html>
<head>
<title></title>
</head>
<body>
<form enctype="multipart/form-data" id="uploadImg">
<input type="text" class="username" value="xuxingfeng" />
<br />
<br />
<input type="password" class="password" value="123456" />
<br />
<br />
上传文件:
<input name="file" type="file" id="file" />
</form>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
// jquery实现
// $(function() {
// $('input[type="file"]').on("change", function() {
// var file = this.files[0];
// var formData = new FormData($("#uploadImg")[0]);
// formData.append("file", file);
// console.log(formData.get("file"));
// $.ajax({
// url: "upload.php",
// type: "POST",
// cache: false,
// data: formData,
// //dataType: 'json',
// //async: false,
// processData: false, //不需要对数据做任何预处理
// contentType: false //不设置数据格式
// })
// .done(function(res) {
// console.log(res);
// })
// .fail(function(res) {
// console.log(res);
// });
// });
// });
// // 原生js实现单个文件上传
var input = document.querySelector("#file");
var username = document.getElementsByClassName("username")[0];
var password = document.getElementsByClassName("password")[0];
input.onchange = function() {
var file = this.files[0];
console.log(file);
// => File {lastModified: 1587626829826, lastModifiedDate: Thu Apr 23 2020 15:27:09 GMT+0800 (中国标准时间) {}, name: "291587626829_.pic.jpg", size: 99064, type: "image/jpeg", webkitRelativePath: "" }
var formdata = new FormData();
formdata.append("file", file);
formdata.append("username", username.value);
formdata.append("password", password.value);
console.log(formdata.get("file")); // => 上传文件时要上传的文件对象信息
// => File {lastModified: 1587626829826, lastModifiedDate: Thu Apr 23 2020 15:27:09 GMT+0800 (中国标准时间) {}, name: "291587626829_.pic.jpg", size: 99064, type: "image/jpeg", webkitRelativePath: "" }
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
xhr.send(formdata);
xhr.onload = function() {
console.log(xhr.responseText);
};
};
// 只有form同步提交时name才作为key 提交地址为action
</script>
</head>
</html>
upload.php内容如下:
print_r(json_encode($_FILES));
var_dump(json_encode($_POST));
formdata多文件异步上传.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<form enctype="multipart/form-data" id="form_example">
<input type="file" id="files" multiple /><br /><br />
<input type="submit" value="提交" />
</form>
<div id="file-list-display"></div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var fileList = [];
var fileCatcher = document.getElementById("form_example");
var files = document.getElementById("files");
var fileListDisplay = document.getElementById("file-list-display");
// fileCatcher.addEventListener("submit", function(event) {
// event.preventDefault();
// //上传文件
// sendFile();
// });
// sendFile = function() {
// var formData = new FormData();
// var request = new XMLHttpRequest();
// console.dir(files.files);
// //循环添加到formData中
// [].forEach.call(files.files, function(file) {
// // formData.append("files[]", file, file.name);
// formData.append("files[]", file);
// });
// request.open("POST", "upload.php");
// request.send(formData);
// request.onload = function() {
// console.log(JSON.parse(request.responseText));
// };
// };
// 张~: 多图片上传触发事件
// function uploadImgs(_this, event) {
// // 实例FormData
// var data = new FormData();
// for (var i = 0; i < event.target.files.length; i++) {
// var files = event.target.files[i];
// // 批量添加文件
// data.append("file[]", files);
// }
// // 异步提交 ajaxUpload(data);
// }
// 页面展示上传文件信息
// files.addEventListener("change", function(event) {
// for (var i = 0; i < files.files.length; i++) {
// fileList.push(files.files[i]);
// }
// renderFileList();
// });
// renderFileList = function() {
// fileListDisplay.innerHTML = "";
// fileList.forEach(function(file, index) {
// var fileDisplayEl = document.createElement("p");
// fileDisplayEl.innerHTML = index + 1 + ":" + file.name;
// fileListDisplay.appendChild(fileDisplayEl);
// });
// };
// ajax异步多文件上传
files.addEventListener("change", function(event) {
var formdata = new FormData();
for (var i = 0; i < this.files.length; i++) {
formdata.append("file[]", this.files[i]);
}
renderFileList(formdata);
});
renderFileList = function(formdata) {
var request = new XMLHttpRequest();
request.open("POST", "upload.php");
request.send(formdata);
request.onload = function() {
console.log(JSON.parse(request.responseText));
};
};
});
</script>
</body>
</html>
upload.php内容如下:
print_r(json_encode($_FILES));
form表单同步多文件上传
add-todos.php
<?php
function add()
{
// 目标：接收客户端提交的数据和文件，最终保存到数据文件中
// TODO: 接收提交的文本内容
// TODO: 接收海报文件
// TODO: 接收音乐文件
// TODO:
print_r($_FILES);
var_dump($_POST);
}
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
add();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加新音乐</title>
<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css">
</head>
<body>
<div class="container my-5">
<h1 class="display-4">添加新音乐</h1>
<hr>
<?php if (isset($error_message)) : ?>
<div class="alert alert-danger" role="alert">
<?php echo $error_message; ?>
</div>
<?php endif ?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="title">标题</label>
<input type="text" class="form-control" id="title" name="title">
</div>
<div class="form-group">
<label for="artist">歌手</label>
<input type="text" class="form-control" id="artist" name="artist">
</div>
<div class="form-group">
<label for="images">海报</label>
<!-- multiple 可以让一个文件域多选 -->
<input type="file" class="form-control" id="images" name="images[]" accept="image/*" multiple>
</div>
<div class="form-group">
<label for="source">音乐</label>
<!-- accept 可以设置两种值分别为 MIME Type / 文件扩展名 ".lrc, .txt" -->
<input type="file" class="form-control" id="source" name="source" accept=".lrc">
</div>
<button class="btn btn-primary btn-block">保存</button>
</form>
</div>
</body>
</html>
网友评论