天天看点

ajax利用FormData、FileReader实现多文件上传php获取

前台代码(注意,不需要用到form标签):

a. html部分:

ajax利用FormData、FileReader实现多文件上传php获取

b. js部分:

ajax利用FormData、FileReader实现多文件上传php获取

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 获取):

ajax利用FormData、FileReader实现多文件上传php获取

完整代码:

<?php

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

$pics = $_FILES['pics'];

var_dump($pics);

$text = $_POST['text'];

var_dump($text);

前台代码:

a. html代码:

ajax利用FormData、FileReader实现多文件上传php获取

b. js代码:

ajax利用FormData、FileReader实现多文件上传php获取

<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. 允许跨域:

ajax利用FormData、FileReader实现多文件上传php获取

b. 将前台post过来的数据保存为临时文件:

ajax利用FormData、FileReader实现多文件上传php获取

c. 获取文件真实后缀函数:

ajax利用FormData、FileReader实现多文件上传php获取

d. 将临时文件保存为带真实后缀的文件:

ajax利用FormData、FileReader实现多文件上传php获取

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