中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

ajax利用FormData、FileReader實現多文件上傳php獲取

發布時間:2020-07-29 14:38:11 來源:網絡 閱讀:7528 作者:Lee_吉 欄目:web開發

一、FormData方式

  1. 前臺代碼(注意,不需要用到form標簽):
    a. html部分:
    ajax利用FormData、FileReader實現多文件上傳php獲取
    b. js部分:
    ajax利用FormData、FileReader實現多文件上傳php獲取
    c. 完整代碼:
    <input type="file" multiple id="lee_file">
    <input type="text" id="lee_text" value="test">
    <input type="button" value="Upload" id="lee_button">
    <script>
    function loadDoc(file,data,async=true){
    if(window.XMLHttpRequest){  // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }else{  // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(async === true){
      xmlhttp.onreadystatechange = function(){
          if(xmlhttp.readyState < 4){
              // 加載中
          }else if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
              // 成功
              xmlDoc=xmlhttp.responseText;
              return xmlDoc
          }else{
              // 失敗
              xmlhttp.abort()
              return
          }
      }
    }
    xmlhttp.open("POST",file,async);
    xmlhttp.send(data);
    if(async === false){
      xmlDoc=xmlhttp.responseText;
      return xmlDoc
    }
    }
    function getEle(id){
    var ele = document.getElementById(id)
    return ele
    }
    function sendFile() {
    var lee_file = getEle('lee_file');
    var lee_text = getEle('lee_text');
    var form_data = new FormData();
    for (var i in lee_file.files) {
    form_data.append('pics[]', lee_file.files[i]);
    }
    form_data.append('text', lee_text.value);
    loadDoc('test.php',form_data)
    }
    var lee_button = getEle('lee_button');
    lee_button.onclick = function(){
    sendFile()
    }
    </script>
  2. php獲取(用 $_FILE 獲取):
    ajax利用FormData、FileReader實現多文件上傳php獲取
    完整代碼:
    <?php
    header('Access-Control-Allow-Origin: *');
    var_dump($_POST);
    var_dump($_FILES);

    二、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>
    function loadDoc(file,data,async=true){
    if(window.XMLHttpRequest){  // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }else{  // code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    if(async === true){
      xmlhttp.onreadystatechange = function(){
          if(xmlhttp.readyState < 4){
              // 加載中
          }else if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
              // 成功
              xmlDoc=xmlhttp.responseText;
              return xmlDoc
          }else{
              // 失敗
              xmlhttp.abort()
              return
          }
      }
    }
    xmlhttp.open("POST",file,async);
    xmlhttp.send(data);
    if(async === false){
      xmlDoc=xmlhttp.responseText;
      return xmlDoc
    }
    }
    function getEle(id){
    var ele = document.getElementById(id)
    return ele
    }
    lee_button = getEle('lee_button')
    function sendFile() {
    var lee_file = getEle('lee_file').files;
    var lee_text = getEle('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代表文件讀取成功
        getEle('lee_img').setAttribute('src',reader.result);
        form_data.append('pic', reader.result);
        loadDoc('test.php',form_data)
      }
    }
    }
    lee_button.onclick = 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|img)\/(\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 = "unknow";
    if($typeCode == 255216){
        $suffix = "jpg";
    }elseif($typeCode == 7173){
        $suffix = "gif";
    }elseif($typeCode == 13780){
        $suffix = "png";
    }elseif($typeCode == 6677){
        $suffix = "bmp";
    }elseif($typeCode == 7798){
        $suffix = "exe";
    }elseif($typeCode == 7784){
        $suffix = "midi";
    }elseif($typeCode == 8297){
        $suffix = "rar";
    }elseif($typeCode == 7368){
        $suffix = "mp3";
    }elseif($typeCode == 0){
        $suffix = "mp4";
    }elseif($typeCode == 8273){
        $suffix = "wav";
    }
    return $suffix;
    }
向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

凯里市| 马山县| 怀化市| 洞口县| 吐鲁番市| 布尔津县| 旅游| 库尔勒市| 渭源县| 张家界市| 唐山市| 东方市| 多伦县| 十堰市| 黄龙县| 同江市| 武宣县| 巴楚县| 桃园县| 建昌县| 南陵县| 湖北省| 南乐县| 安义县| 祁东县| 东丰县| 大石桥市| 河北区| 和林格尔县| 靖宇县| 龙岩市| 永春县| 屏东市| 汨罗市| 朝阳县| 会东县| 登封市| 长汀县| 蒙自县| 张北县| 梓潼县|