主要功能，使用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;}}?>
?
 函數調用時實參與形參不兼容的問題解決)
