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

发布时间:2020-07-29 14:38:11 作者:Lee_吉
来源:网络 阅读:7528

一、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;
    }
推荐阅读:
  1. 结合FormData的Ajax的超简洁传图
  2. 基于jsp的AJAX多文件上传的实现

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

ajax上传文件 dat fo

上一篇:Android项目中如何使用实体类entity

下一篇:U盘启动工具制作

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》