ajax利用FormData、FileReader實現多檔案上傳php獲取

科技小能手發表於2017-11-12
ORMPHP

一、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


相關文章