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

一、FormData方式

  1. 前台代码(注意,不需要用到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({
    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>
  2. php获取(用 $_FILE 获取):
    ajax利用FormData、FileReader实现多文件上传php获取
    完整代码:
    <?php
    header('Access-Control-Allow-Origin: *');
    $pics = $_FILES['pics'];
    var_dump($pics);
    $text = $_POST['text'];
    var_dump($text);

    二、FileReader+FormData+base64

  3. 前台代码:
    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="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>
  4. php代码(用 $_POST 获取):
    a. 允许跨域:
    ajax利用FormData、FileReader实现多文件上传php获取
    b. 将前台post过来的数据保存为临时文件:
    ajax利用FormData、FileReader实现多文件上传php获取
    c. 获取文件真实后缀函数:
    ajax利用FormData、FileReader实现多文件上传php获取
    d. 将临时文件保存为带真实后缀的文件:
    ajax利用FormData、FileReader实现多文件上传php获取
    e. 完整代码:
    <?php
    header('Access-Control-Allow-Origin: ');
    /

    将流文件保存为临时文件
    @param stream base64输入流
    @param tmpname 临时文件路径
    /
    function uploadBase64($stream) {
    if(empty($stream)) return false;
    if(preg_match('/^(data:\s
    image\/(\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
上一篇:Spring认证中国教育管理中心-Spring Data R2DBC框架教程一


下一篇:kill会话过程分析+