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

来源：互联网发布：淘宝卖家怎么评价买家编辑：程序博客网时间：2024/06/07 17:44

前端效果

前端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;    }

阅读全文

0 0