主要功能，使用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;
}
}
?>