首页 > 代码库 > H5+jqweui实现手机端图片压缩上传

H5+jqweui实现手机端图片压缩上传

主要功能,使用H5的formData上传base64格式的图片,canvas压缩图片,前端样式使用weui,为方便起见,使用了jquery封装过的weui,jqweui。

话不多少,开始上代码。

前端代码,直接在jqweui官网下的demo里改的(是dist下的demo)

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery WeUI</title>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">

<link rel="stylesheet" href="../lib/weui.min.css">
<link rel="stylesheet" href="../css/jquery-weui.css">
<link rel="stylesheet" href="css/demos.css">

  </head>

  <body ontouchstart>
    <header class=‘demos-header‘>
      <h1 class="demos-title">Uploader</h1>
    </header>

    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
          <div class="weui-uploader">
            <div class="weui-uploader__hd">
              <p class="weui-uploader__title">图片上传</p>
              <div class="weui-uploader__info">0/2</div>
            </div>
            <div class="weui-uploader__bd">
              <ul class="weui-uploader__files" id="uploaderFiles">
                <li class="weui-uploader__file" style="background-image:url(./images/pic_160.png)"></li>

              </ul>
              <div class="weui-uploader__input-box">
                <input id="uploaderInput" class="weui-uploader__input" type="file" accept="image/*" multiple="">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="../lib/jquery-2.1.4.js"></script>
<script src="../lib/fastclick.js"></script>
<script>
  $(function() {
    FastClick.attach(document.body);
  });
</script>
<script src="../js/jquery-weui.js"></script>
<script>
  $(function () {  
    // 允许上传的图片类型  
    var allowTypes = [image/jpg, image/jpeg, image/png, image/gif];  
    // 1024KB,也就是 1MB  
    var maxSize = 2048 * 2048;  
    // 图片最大宽度  
    var maxWidth = 10000;  
    // 最大上传图片数量  
    var maxCount = 6;  
    $(#uploaderInput).on(change, function (event) {  
      var files = event.target.files;  
      //console.log(files);return false;
        // 如果没有选中文件,直接返回  
        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) {  
              
                $.alert("该类型不允许上传!", "警告!");              
              continue;  
            }  
            
            if (file.size > maxSize) {  
              //$.weui.alert({text: ‘图片太大,不允许上传‘});
                $.alert("图片太大,不允许上传", "警告!");              
              continue;  
            }  
            
            if ($(.weui-uploader__file).length >= maxCount) {  
              $.weui.alert({text: 最多只能上传 + maxCount + 张图片});  
              return;  
            }  
            reader.readAsDataURL(file);  
            reader.onload = function (e) {
                //console.log(e);
              var img = new Image(); 
                img.src = e.target.result;         
                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/jpeg,0.8); //console.log(base64); // 插入到预览区 var $preview = $(<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url( + img.src + )"><div class="weui-uploader__file-content">0%</div></li>); $(#uploaderFiles).append($preview); var num = $(.weui-uploader__file).length; $(.weui-uploader__info).text(num + / + maxCount); var formData = new FormData(); formData.append("images", base64); //console.log(img.src); $.ajax({ url: "savetofile.php", type: POST, data: formData, contentType:false, processData:false, success: function(data){ $preview.removeClass(weui-uploader__file_status); $.toast("上传成功", function() { //console.log(‘close‘); }); }, error: function(xhr, type){ alert(Ajax error!) } }); }; }; } }); }); </script> </body> </html>

上述代码中

 var base64 = canvas.toDataURL(‘image/jpeg‘,0.8); 

只有这个函数的第一个参数为image/jpeg是压缩功能才可正常使用,第二个参数为压缩比例

php代码,对base64格式的图片解码并保存

<?php
  
$imgData = $_REQUEST[‘images‘];
if (preg_match(‘/^(data:\s*image\/(\w+);base64,)/‘, $imgData, $result)){
  $type = $result[2];
    
    $rand = rand(1000,9999);
  $new_file = ‘img/‘.$rand.‘.‘.$type;
  if (file_put_contents($new_file, base64_decode(str_replace($result[1], ‘‘, $imgData)))){
    echo $type;
  }

}
    
?>  

 

H5+jqweui实现手机端图片压缩上传