一、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_吉 51CTO博客，原文链接:http://blog.51cto.com/12173069/2059657