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

前端html代码

[html]view plain copy
<!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处理代码

[php]view plain copy
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;  
    }  

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

猜你喜欢