背景
前两天在做图片上传的功能优化，发现了一个效果比较好的JQuery插件(H5移动前端图片批量压缩上传)，看其中的介绍是使用了base64编码的方式进行上传个人在使用过程中，做了简单处理，只需向后台传输base64编码数据即可，然后后台进行处理，下面主要介绍我的操作流程，可做参考.一. 前端处理
①. js 代码修改
本着不做过多更改的原则，在处理好页面布局后，我只是修改了源代码中的upload()方法.处理目的：
将获取的
base64编码传到后台，如果后台顺利处理完毕，会返回它的存储路径，然后我进行了多图片存储路径在页面上（隐藏域）的拼接，方面后面提交后的数据库数据存储如果没有成功，则会返回错误提示信息
// 图片上传，将base64的图片转成二进制对象，塞进formdata上传function upload(basestr, type, $li) {var text = window.atob(basestr.split(",")[1]);var buffer = new Uint8Array(text.length);for (var i = 0; i < text.length; i++) {buffer[i] = text.charCodeAt(i);}var toUrl = "{:U('Order/ajaxUploadCommentImgs')}";$.post(toUrl,{'basestr':basestr},function (res) {if (res.status){var imgStr = $(".imgStr").val();$(".imgStr").val(imgStr+"^^"+res.message);}else {layer.msg(res.message);}},'JSON')}
②. 图片上传效果
选取图片后的异步上传效果如下：注意事项
此时尤其注意下，向后台传输的数据是否为正确的编码 [个人开发测试时，手贱剔除了
"data:image/jpeg;base64",这一段，可不要犯同样的错误]想要知道自己的base64编码是否正确，建议使用 在线转换工具 测试一下
二. 后台处理
①. ajax 提交的处理接口
其中会调用后面的base64_image_content()方法，注意下面我的showMsg()方法，实现的功能就是向前端返回处理后的json数据.public function ajaxUploadCommentImgs(){$postData = I('post.');if(IS_AJAX && IS_POST){$uploadUrl = "Public/Upload";$tagUrl = $this->base64_image_content($postData['basestr'],$uploadUrl);if ($tagUrl){//TODO 将其写入数据库return showMsg(1,$tagUrl);}else{return showMsg(0,'图片上传失败！');}}else{return showMsg(0,"请求不合法！");}}
②. 核心函数 base64_image_content
该函数，我所参考的来源为PHP将Base64图片转换为本地图片并保存,在此我根据自己的业务进行了相关处理/*** [将Base64图片转换为本地图片并保存]* @param $base64_image_content [要保存的Base64]* @param $path [要保存的路径]* @return bool|string*/public function base64_image_content($base64_image_content,$path){//匹配出图片的格式if (preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_image_content, $result)){$type = $result[2];$new_file = $path."/".date('Ymd',time())."/";$basePutUrl = C('UPLOAD_IMG_BASE64_URL').$new_file;if(!file_exists($basePutUrl)){//检查是否有该文件夹，如果没有就创建，并给予最高权限mkdir($basePutUrl, 0700);}$ping_url = genRandomString(8).time().".{$type}";$ftp_image_upload_url = $new_file.$ping_url;$local_file_url = $basePutUrl.$ping_url;if (file_put_contents($local_file_url, base64_decode(str_replace($result[1], '', $base64_image_content)))){//TODO 个人业务的FTP 账号图片上传ftp_upload(C('REMOTE_ROOT').$ftp_image_upload_url,$local_file_url);return $ftp_image_upload_url;}else{return false;}}else{return false;}}
代码中提及到的配置数据：
//为了获取绝对路径
‘UPLOAD_IMG_BASE64_URL’ => str_replace(‘Application/Common/Conf/config.php’, ‘’, str_replace(’\’, ‘/’,FILE)),
提示说明：
①. 说明:
尤其说明一下，方法file_put_contents()所要传入的local_file_url参数要求为绝对路径，不然会报错的啊啊啊啊啊，本人也是卡住了好半天！！！对于图片上传的base64编码上传，前端除了效果设计，处理逻辑相对是类似的，目的就是向后台传输规范的base64编码②. 注意事项：
推荐文章：PHP base64转换成图片本文中所提供的
Jquery插件，测试可支持iphone7微信内置浏览效果以及谷歌浏览器的使用，确定就是没有提供取消按钮所以，异步图片数据的上传可能返回信息有延迟，以至于图片路径还未返回，就进行了整体表单的数据提交，造成数据遗失.
③. 附录代码
showMsg()方法展示，用于json数据的返回/*** 公用的方法 进行信息的提示*/function showMsg($status, $message, $data = array()){$result = array('status' => $status,'message' => $message,'data' => $data);exit(json_encode($result));}
