ajax利用FormData、FileReader实现多文件上传php获取
生活随笔
收集整理的這篇文章主要介紹了
ajax利用FormData、FileReader实现多文件上传php获取
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
一、FormData方式
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
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>
a. 允許跨域：
b. 將前臺(tái)post過(guò)來(lái)的數(shù)據(jù)保存為臨時(shí)文件：
c. 獲取文件真實(shí)后綴函數(shù)：
d. 將臨時(shí)文件保存為帶真實(shí)后綴的文件：
e. 完整代碼：
<?php
header('Access-Control-Allow-Origin:?');
/
將流文件保存為臨時(shí)文件
@param stream base64輸入流
@param tmpname 臨時(shí)文件路徑
/
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;
}
}
/
獲取文件類(lèi)型
@param filename 文件名
@param suffix 文件真實(shí)后綴 .jpg .png .gif
/
function getSuffix($fileName){
$file = fopen($fileName, "rb");
$bin = fread($file, 2); // 只讀2字節(jié)
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('上傳失敗');
}
}
?本文轉(zhuǎn)自 Lee_吉 51CTO博客，原文鏈接:http://blog.51cto.com/12173069/2059657
總結(jié)
以上是生活随笔為你收集整理的ajax利用FormData、FileReader实现多文件上传php获取的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Spring Boot使用MyBatis
- 下一篇： Python 获取系统信息模块psuti