一、FormData方式
前台代码（注意，不需要用到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获取（用 $_FILE 获取）：
完整代码：<?php header('Access-Control-Allow-Origin: *'); $pics = $_FILES['pics']; var_dump($pics); $text = $_POST['text']; var_dump($text);二、FileReader+FormData+base64
前台代码：
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="button" value="上传图片" id="lee_button"> <img src="" alt="" id="lee_img"></form> <script type="text/javascript" src="jquery.min.js"></script> <script>var lee_button = $('#lee_button'); function sendFile() { var lee_file = $('#lee_file')[0].files; var lee_text = $('#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代表文件读取成功 $('#lee_img').attr('src', reader.result); form_data.append('pic', reader.result); $.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代码（用 $_POST 获取）：
a. 允许跨域：
b. 将前台post过来的数据保存为临时文件：
c. 获取文件真实后缀函数：
d. 将临时文件保存为带真实后缀的文件：
e. 完整代码：<?php header('Access-Control-Allow-Origin:*'); /* * 将流文件保存为临时文件 * @param stream base64输入流 * @param tmpname 临时文件路径 */ function uploadBase64($stream) { if (empty($stream)) return false; if (preg_match('/^(data:\simage\/(\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 = "."; if ($typeCode == 255216) { $suffix.= "jpg"; } elseif ($typeCode == 7173) { $suffix.= "gif"; } elseif ($typeCode == 13780) { $suffix.= "png"; } else { $suffix = false; } return $suffix; } $stream = $_POST['pic']; $tmpname = uploadBase64($stream); $suffix = getSuffix($tmpname); if ($suffix !== false) { $realname = rand(1000, 9999) . $suffix; $ret = rename($tmpname, $realname); if ($ret) { exit('上传成功'); } else { exit('上传失败'); } }
本文转自 Lee_吉 博客，原文链接： http://blog.51cto.com/12173069/2059657
如需转载请自行联系原作者
