手机端图片压缩上传解决方案

最新推荐文章于 2024-07-05 16:23:37 发布

程序员面试那点事儿

最新推荐文章于 2024-07-05 16:23:37 发布

阅读量2.5k

点赞数

分类专栏： PHP 项目总结

本文链接：https://blog.csdn.net/qq_23864697/article/details/77851141

版权

PHP 同时被 2 个专栏收录

73 篇文章 0 订阅

订阅专栏

项目总结

2 篇文章 1 订阅

订阅专栏

前端页面

引入lrz.min,js，lrz的的github上的项目地址：https://github.com/think2011/localResizeIMG

<!doctype html>

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
<title>手机端上传案例</title>
<link rel="stylesheet" href="{$_W['siteroot']}app/resource/power/css/weuix.min.css">
<script src="{$_W['siteroot']}app/resource/repair/repair/js/zepto.min.js"></script>
<script src="{$_W['siteroot']}app/resource/repair/repair/js/lrz.min.js"></script>
</head>
<body>
<div class="weui-header bg-blue" style="background:#ffb81f;">
<div class="weui-header-left"> <a class="icon icon-109 f-white" href="JavaScript:history.back(-1)">返回</a> </div>
<h1 class="weui-header-title">消息发布</h1>
<div class="weui-header-right"><a class="icon icon-83 f-white"></a></div>
</div>
<form action="{php echo url('power/require/require_add')}" method="post">
<div class="weui_cells weui_cells_form">
<div class="weui_cell">
<div class="weui_cell_bd weui_cell_primary">
<textarea class="weui_textarea" placeholder="请描述您所需" rows="3" name="descript"></textarea>
<div class="weui_textarea_counter"><span></span></div>
</div>
</div>
<div class="weui_cell_bd weui_cell_primary">
<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"></div>
</div>
<div class="weui_uploader_bd">
<ul class="weui_uploader_files" id='img2x'>
</ul>
<div class="weui_uploader_input_wrp">
<input class="weui_uploader_input" type="file" accept="image/*" οnchange="previewImage1(this)" multiple />

</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
<div class="bd spacing"> <input class="weui_btn weui_btn_warn" type="submit" value="确认发布">
</div>
</form>
<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) {
$.post("{php echo url('common/upload')}", { 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>
</body>

</html>

后台处理

<?php
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(ATTACHMENT_ROOT . "repair/" . $file, base64_decode($data)) == false) {
echo json_encode(array('src' => "上传错误。。", 'size' => $_POST['size'], "error" => 1));
} else {
echo json_encode(array('src' => $_W['siteroot'] . "attachment/repair/" . $file, 'size' => $_POST['size'], "error" => 0));
}