前台代碼（注意，不需要用到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({
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);
前台代碼：
a. html代碼：
b. js代碼：
<img src="" alt="" id="lee_img">
var lee_file = $('#lee_file')[0].files;
for(var i=0;i<lee_file.length;i++){
file = lee_file[i];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function(){ // onload代表檔案讀取成功
$('#lee_img').attr('src',reader.result);
form_data.append('pic',reader.result);
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:\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;
擷取檔案類型
@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";
$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('上傳成功');
exit('上傳失敗');
本文轉自 Lee_吉 51CTO部落格，原文連結:http://blog.51cto.com/12173069/2059657