ajax利用FormData实现多文件上传php获取
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax利用FormData实现多文件上传php获取相关的知识，希望对你有一定的参考价值。
- 前台代码（注意，不需要用到form标签）：
a. html部分：
b. js部分：
c. 完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form>
<input type="file" multiple id="lee_file">
<input type="text" id="lee_text" value="test">
<input type="button" value="上传图片" id="lee_button">
</form>
<script type="text/javascript" src="jquery.min.js"></script>
<script>
var lee_button = $(‘#lee_button‘);
function sendFile(){
var lee_file = $(‘#lee_file‘);
var lee_text = $(‘#lee_text‘);
var form_data = new FormData();
for(var i in lee_file[0].files){
form_data.append(‘pics[]‘,lee_file[0].files[i]);
}
form_data.append(‘text‘,lee_text.val());
$.ajax({
url: ‘http://localhost/111.php‘,
type: ‘POST‘,
cache: false,
data: form_data,
processData: false,
contentType: false
}).done(function(res) {
console.log(res);
}).fail(function(res) {
console.log(‘fail‘);
});
}
lee_button.click(function(){
sendFile();
})
</script>
</body>
</html> - php获取：
完整代码：
<?php
header(‘Access-Control-Allow-Origin: *‘);
$pics = $_FILES[‘pics‘];
var_dump($pics);
$text = $_POST[‘text‘];
var_dump($text);
以上是关于ajax利用FormData实现多文件上传php获取的主要内容，如果未能解决你的问题，请参考以下文章
基于jQuery的ajax系列之用FormData实现页面无刷新上传