基于手机端的base64异步多图上传+php后台程序处理【代码】

最新推荐文章于 2021-08-24 16:27:12 发布

辛苦的字幕君小样

最新推荐文章于 2021-08-24 16:27:12 发布

阅读量1k

点赞数

分类专栏：后端文章标签： php 多图上传 base64

本文链接：https://blog.csdn.net/zhongyuchuan147/article/details/75227612

版权

后端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

前端效果

前端html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <title>WeUI-Uploader</title>
  <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/0.3.0/weui.css" />
</head>
<body>
  <div class="container">
    <div class="weui_cells_title">上传</div>
    <div class="weui_cells weui_cells_form">
      <div class="weui_cell">
        <div class="weui_cell_bd weui_cell_primary">
          <div class="weui_uploader">
            <div class="weui_uploader_hd weui_cell">
              <div class="weui_cell_bd weui_cell_primary">图片上传</div>
              <div class="weui_cell_ft js_counter">0/6</div>
            </div>
            <div class="weui_uploader_bd">
              <ul class="weui_uploader_files">
                <!-- 预览图插入到这 --> </ul>
              <div class="weui_uploader_input_wrp">
                <input class="weui_uploader_input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="weui_dialog_alert" style="display: none;">
    <div class="weui_mask"></div>
    <div class="weui_dialog">
      <div class="weui_dialog_hd"> <strong class="weui_dialog_title">警告</strong>
      </div>
      <div class="weui_dialog_bd">弹窗内容，告知当前页面信息等</div>
      <div class="weui_dialog_ft">
        <a href="javascript:;" class="weui_btn_dialog primary">确定</a>
      </div>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/zepto/1.1.6/zepto.min.js"></script>
</body>
</html>
<script>  
  $.weui = {};  
  $.weui.alert = function(options){  
    options = $.extend({title: '警告', text: '警告内容'}, options);  
    var $alert = $('.weui_dialog_alert');  
    $alert.find('.weui_dialog_title').text(options.title);  
    $alert.find('.weui_dialog_bd').text(options.text);  
    $alert.on('touchend click', '.weui_btn_dialog', function(){  
      $alert.hide();  
    });  
    $alert.show();  
  };  
  
  $(function () {  
    // 允许上传的图片类型  
    var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif'];  
    // 1024KB，也就是 1MB  
    var maxSize = 1024 * 1024;  
    // 图片最大宽度  
    var maxWidth = 300;  
    // 最大上传图片数量  
    var maxCount = 6;  
    $('.js_file').on('change', function (event) {  
      var files = event.target.files;  
      
        // 如果没有选中文件，直接返回  
        if (files.length === 0) {  
          return;  
        }  
        
        for (var i = 0, len = files.length; i < len; i++) {  
          var file = files[i];  
          var reader = new FileReader();  
          
            // 如果类型不在允许的类型范围内  
            if (allowTypes.indexOf(file.type) === -1) {  
              $.weui.alert({text: '该类型不允许上传'});  
              continue;  
            }  
            
            if (file.size > maxSize) {  
              $.weui.alert({text: '图片太大，不允许上传'});  
              continue;  
            }  
            
            if ($('.weui_uploader_file').length >= maxCount) {  
              $.weui.alert({text: '最多只能上传' + maxCount + '张图片'});  
              return;  
            }  
            
            reader.onload = function (e) {  
              var img = new Image();  
              img.onload = function () {  
                    // 不要超出最大宽度  
                    var w = Math.min(maxWidth, img.width);  
                    // 高度按比例计算  
                    var h = img.height * (w / img.width);  
                    var canvas = document.createElement('canvas');  
                    var ctx = canvas.getContext('2d');  
                    // 设置 canvas 的宽度和高度  
                    canvas.width = w;  
                    canvas.height = h;  
                    ctx.drawImage(img, 0, 0, w, h);  
                    var base64 = canvas.toDataURL('image/png');  
                    
                    // 插入到预览区  
                    var $preview = $('<li class="weui_uploader_file weui_uploader_status" style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>');  
                    $('.weui_uploader_files').append($preview);  
                    var num = $('.weui_uploader_file').length;  
                    $('.js_counter').text(num + '/' + maxCount);  
                    
                    $.ajax({
						  type: 'POST',
						  url: 'http://127.0.0.4/index.php/Index/posts',
						  // data to be added to query string:
						  data: { name: base64 },
						  // type of data we are expecting in return:
						  dataType: 'json',
						  timeout: 300,
						  context: $('body'),
						  success: function(data){
						    // Supposing this JSON payload was received:
						    //   {"project": {"id": 42, "html": "<div>..." }}
						    // append the HTML to context object.
						    this.append(data.project.html)
						  },
						  error: function(xhr, type){
						    // alert('Ajax error!')
						  }
						})
                    // alert(1);
                    
                    // 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传  
                    
                    var progress = 0;  
                    function uploading() {  
                      $preview.find('.weui_uploader_status_content').text(++progress + '%');  
                      if (progress < 100) {  
                        setTimeout(uploading, 30);  
                      }  
                      else {  
                            // 如果是失败，塞一个失败图标  
                            //$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>');  
                            $preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove();  
                          }  
                        }  
                        setTimeout(uploading, 30);  
                      };  
                      
                      img.src = e.target.result;  
                    };  
                    reader.readAsDataURL(file);  
                  }  
                });  
  });  
//# sourceURL=pen.js  
</script>
</body>
</html>

后台php处理代码

function posts(){
        $name=isset($_POST['name'])?$_POST['name']:'0';
        if(!$name){echo 1;exit;}
        // $img = base64_decode($name);
        $img = base64_decode(explode(';base64,',$name)[1]);
        $datase=file_get_contents($img);
        $type=explode(';base64,',$name)[0];//图片类型
        $type=explode('data:',$type)[1];
        // echo $type;exit;
        if ($type == "image/gif") {
            $type='gif';
        }else if($type  == "image/jpeg"){
            $type='jpg';
        }else if($type == "image/pjpeg"){
            $type='jpg';
        }else if($type == "image/png"){
            $type='png';
        }
        
        $imgsrc=date("y").date("m").date("d").'\\';//图片路径
        $imgname=generate_password(12).str_replace(',','',str_replace(' ','',microtime())).'.'.$type;//图片名称
        $src=dirname(dirname(dirname(dirname(__FILE__)))).'\Public\imgsecs\\';
        $this->mkdirs($src);//函数判断文件夹是否存在 如果存在则存入不存在则创建
        $this->mkdirs($src.$imgsrc);
        file_put_contents($src.$imgsrc.$imgname,$img);//保存图片，返回的是字节数
        echo $src.$imgsrc.$imgname;//图片储存地址
       
        exit;
    }