微擎移动端图片上传和兼容问题:
引入lrz.min.js,用于压缩图片有时候会遇到各类手机不兼容的问题时需引入2.chunk.js。lrz.min.js和2.chunk.js的地址:https://github.com/think2011/localResizeIMG
前端的js代码:
<script type="text/javascript">
function previewImage1(file) {
var MAXWIDTH = 100;
var MAXHEIGHT = 200;
for(var i=0;i<file.files.length;i++){
if (file.files && file.files[i]) {
$.showLoading();
lrz(file.files[i],{width:640})
.then(function (rst) {
console.log(rst.base64);
$.post("{php echo $this->createMobileUrl('pic')}", { base64:rst.base64 },function(ret){
var obj = eval('(' + ret + ')');
if(obj.error!=1){
$('#img2x').append('<li class="weui_uploader_file" style="background-image:url('+rst.base64+')"></li><input value="'+obj.src+'" type="hidden" name="files[]" />');
$.hideLoading();
}else{
alert('上传失败'+obj.src);
$.hideLoading();
}
})
})
}
}
}
</script>
function previewImage1(file) {
var MAXWIDTH = 100;
var MAXHEIGHT = 200;
for(var i=0;i<file.files.length;i++){
if (file.files && file.files[i]) {
$.showLoading();
lrz(file.files[i],{width:640})
.then(function (rst) {
console.log(rst.base64);
$.post("{php echo $this->createMobileUrl('pic')}", { base64:rst.base64 },function(ret){
var obj = eval('(' + ret + ')');
if(obj.error!=1){
$('#img2x').append('<li class="weui_uploader_file" style="background-image:url('+rst.base64+')"></li><input value="'+obj.src+'" type="hidden" name="files[]" />');
$.hideLoading();
}else{
alert('上传失败'+obj.src);
$.hideLoading();
}
})
})
}
}
}
</script>
通过ajax异步传值将图片的压缩后传给后台上传到服务器,同时后台会返回服务器上存储的图片的地址,然后将图片的地址保存到数据库中
后台图片上传到服务器的代码:
function generate_password($length = 5) {
$chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
$password = "";
for ($i = 0; $i < $length; $i++) {
$password .= $chars[mt_rand(0, strlen($chars) - 1)];
}
return $password;
}
$data = $_POST['base64'];
preg_match("/data:image\/(.*);base64,/", $data, $res);
$ext = $res[1];
if (!in_array($ext, array("jpg", "jpeg", "png", "gif"))) {
echo json_encode(array('src' => "上传格式错误。。" . $ext, 'size' => $_POST['size'], "error" => 1));die;
}
$file = generate_password(5) . time() . '.' . $ext;
$data = preg_replace("/data:image\/(.*);base64,/", "", $data);
if (file_put_contents(MODULE_ROOT . "/upload/" . $file, base64_decode($data)) == false) {
echo json_encode(array('src' => "上传错误。。", 'size' => $_POST['size'], "error" => 1));
} else {
echo json_encode(array('src' => $_W['siteroot'] . "addons/pht_bbs/upload/" . $file, 'size' => $_POST['size'], "error" => 0));
}
$chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
$password = "";
for ($i = 0; $i < $length; $i++) {
$password .= $chars[mt_rand(0, strlen($chars) - 1)];
}
return $password;
}
$data = $_POST['base64'];
preg_match("/data:image\/(.*);base64,/", $data, $res);
$ext = $res[1];
if (!in_array($ext, array("jpg", "jpeg", "png", "gif"))) {
echo json_encode(array('src' => "上传格式错误。。" . $ext, 'size' => $_POST['size'], "error" => 1));die;
}
$file = generate_password(5) . time() . '.' . $ext;
$data = preg_replace("/data:image\/(.*);base64,/", "", $data);
if (file_put_contents(MODULE_ROOT . "/upload/" . $file, base64_decode($data)) == false) {
echo json_encode(array('src' => "上传错误。。", 'size' => $_POST['size'], "error" => 1));
} else {
echo json_encode(array('src' => $_W['siteroot'] . "addons/pht_bbs/upload/" . $file, 'size' => $_POST['size'], "error" => 0));
}