前臺代碼(注意，不需要用到form標簽)：

a. html部分：

b. js部分：

c. 完整代碼：

function loadDoc(file,data,async=true){

if(window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}else{ // code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

if(async === true){

xmlhttp.onreadystatechange = function(){

if(xmlhttp.readyState < 4){

// 加載中

}else if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

// 成功

xmlDoc=xmlhttp.responseText;

return xmlDoc

}else{

// 失敗

xmlhttp.abort()

return

}

}

}

xmlhttp.open("POST",file,async);

xmlhttp.send(data);

if(async === false){

xmlDoc=xmlhttp.responseText;

return xmlDoc

}

}

function getEle(id){

var ele = document.getElementById(id)

return ele

}

function sendFile() {

var lee_file = getEle('lee_file');

var lee_text = getEle('lee_text');

var form_data = new FormData();

for (var i in lee_file.files) {

form_data.append('pics[]', lee_file.files[i]);

}

form_data.append('text', lee_text.value);

loadDoc('test.php',form_data)

}

var lee_button = getEle('lee_button');

lee_button.onclick = function(){

sendFile()

}

php獲取(用 $_FILE 獲取)：

完整代碼：

header('Access-Control-Allow-Origin: *');

var_dump($_POST);

var_dump($_FILES);

二、FileReader+FormData+base64

前臺代碼：

a. html代碼：

b. js代碼：

c. 完整代碼：

Document

function loadDoc(file,data,async=true){

if(window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}else{ // code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

if(async === true){

xmlhttp.onreadystatechange = function(){

if(xmlhttp.readyState < 4){

// 加載中

}else if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

// 成功

xmlDoc=xmlhttp.responseText;

return xmlDoc

}else{

// 失敗

xmlhttp.abort()

return

}

}

}

xmlhttp.open("POST",file,async);

xmlhttp.send(data);

if(async === false){

xmlDoc=xmlhttp.responseText;

return xmlDoc

}

}

function getEle(id){

var ele = document.getElementById(id)

return ele

}

lee_button = getEle('lee_button')

function sendFile() {

var lee_file = getEle('lee_file').files;

var lee_text = getEle('lee_text');

for (var i = 0; i < lee_file.length; i++) {

file = lee_file[i];

var form_data = new FormData();

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onloadend = function() { // onload代表文件讀取成功

getEle('lee_img').setAttribute('src',reader.result);

form_data.append('pic', reader.result);

loadDoc('test.php',form_data)

}

}

}

lee_button.onclick = function() {

sendFile();

}

php代碼(用 $_POST 獲取)：

a. 允許跨域：

b. 將前臺post過來的數據保存為臨時文件：

c. 獲取文件真實后綴函數：

d. 將臨時文件保存為帶真實后綴的文件：

e. 完整代碼：

header('Access-Control-Allow-Origin:*');

/*

* 將流文件保存為臨時文件

* @param stream base64輸入流

* @param tmpname 臨時文件路徑

*/

function uploadBase64($stream) {

if (empty($stream)) return false;

if (preg_match('/^(data:(\s)?(image|img)\/(\w+);base64,)/', $stream, $str)) {

$suffix = "tmp";

$tmpname = rand(1000, 9999) . ".{$suffix}";

if (file_put_contents($tmpname, base64_decode(str_replace($str[1], '', $stream)))) {

return $tmpname;

} else {

return false;

}

} else {

return false;

}

}

/*

獲取圖片真實后綴

@param filename 文件名

@param suffix 文件真實后綴(.jpg .png .gif)

*/

function getSuffix($fileName) {

$file = fopen($fileName, "rb");

$bin = fread($file, 2); // 只讀2字節

fclose($file);

$strInfo = @unpack("C2chars", $bin);

$typeCode = intval($strInfo['chars1'] . $strInfo['chars2']);

$suffix = "unknow";

if($typeCode == 255216){

$suffix = "jpg";

}elseif($typeCode == 7173){

$suffix = "gif";

}elseif($typeCode == 13780){

$suffix = "png";

}elseif($typeCode == 6677){

$suffix = "bmp";

}elseif($typeCode == 7798){

$suffix = "exe";

}elseif($typeCode == 7784){

$suffix = "midi";

}elseif($typeCode == 8297){

$suffix = "rar";

}elseif($typeCode == 7368){

$suffix = "mp3";

}elseif($typeCode == 0){

$suffix = "mp4";

}elseif($typeCode == 8273){

$suffix = "wav";

}

return $suffix;

}

總結

以上是生活随笔為你收集整理的php处理form多文件上传,ajax利用FormData、FileReader实现多文件上传php获取的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。