php处理微信weui图片上传

微信weui上传组件
Jquery代码
php处理数据（Thinkphp5）

前端通过weui完成上传图片、预览图片的操作（具体可以看weui案例），然后weui请求数据是base64，php后端将base64数据转为本地保存图片，然后再对其路径和保存数据库的格式以及图片的大小、尺寸等进行编辑操作等等。

微信weui上传组件

<div class="weui-gallery" id="gallery"><span class="weui-gallery__img" id="galleryImg"></span><div class="weui-gallery__opr"><a href="javascript:" class="weui-gallery__del"><i class="weui-icon-delete weui-icon_gallery-delete"></i></a></div>
</div><div class="weui-cell  weui-cell_uploader"><div class="weui-cell__bd"><div class="weui-uploader"><form method="post"><div class="weui-uploader__hd"><p class="weui-uploader__title">图片上传</p><div class="weui-uploader__info"><span id="numb">0</span>/3</div></div><div id="thumb" style="display: none"></div><div class="weui-uploader__bd"><ul class="weui-uploader__files" id="uploaderFiles"></ul><div class="weui-uploader__input-box"><input id="uploaderInput" class="weui-uploader__input js_file" name="file" type="file" accept="image/*" ></div></div><div class="weui-btn-area"><a href="javascript:;" class="weui-btn weui-btn_primary">保存</a></div></form></div></div>
</div>

Jquery代码

<script type="text/javascript" class="uploader js_show">$(function() {// 允许上传的图片类型var allowTypes = [ 'image/jpg', 'image/jpeg', 'image/png', 'image/gif' ];// 1024KB，也就是 1MBvar maxSize = 1024 * 1024;// 图片最大宽度var maxWidth = 600;// 最大上传图片数量var maxCount = 3;$('.js_file').on('change', function(event) {var files = event.target.files;// 如果没有选中文件，直接返回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) {alert('图片太大，不允许上传');continue;}if ($('.weui-uploader__file').length >= maxCount) {alert('最多只能上传' + maxCount + '张图片');continue;}reader.onload = function(e) {var img = new Image();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/png');// 插入到预览区var $preview = $('<li class="weui-uploader__file weui-uploader__file_status" style="background-image:url('+ base64 + ')"><div class="weui-uploader__file-content">0%</div></li>');$('.weui-uploader__files').append($preview);// 然后假装在上传，可以post base64格式，也可以构造blob对象上传，也可以用微信JSSDK上传var progress = 0;function uploading() {$preview.find('.weui-uploader__file-content').text(++progress + '%');if (progress < 100) {setTimeout(uploading, 30);} else {// 如果是失败，塞一个失败图标//$preview.find('.weui-uploader__file-content').html('<i class="weui_icon_warn"></i>');$preview.removeClass('weui-uploader__file_status').find('.weui-uploader__file-content').remove();}}setTimeout(uploading, 30);};img.src = e.target.result;$.ajax({url: "upload",data: {img: e.target.result},type: "POST",dataType: "json",success: function(data) {if (data != '' ){$( '#thumb' ).append( '<span>'+data+'</span>' );$('#numb').html(function (){return parseInt($(this).html())+1})}}});};reader.readAsDataURL(file);}});});$('.weui-btn').on('click',function(){var thumb = new Array();var list = $("#thumb").children().each(function (index, element) {thumb.push($(this).html());});if(thumb.length <{$site.maxupload}){warnToast('请上传3张图片')}else{$.ajax({url: "add",data: {content: thumb,tid:123},type: "POST",dataType: "json",success: function(data) {if(data.code == 0){warnToast(data.msg)}else if(data.code == 1){toast(data.msg)}}});}})$(function(){$gallery = $("#gallery"), $galleryImg = $("#galleryImg"),$uploaderInput = $("#uploaderInput"),$uploaderFiles = $("#uploaderFiles");var index; //第几张图片$uploaderFiles.on("click", "li", function() {index = $(this).index();$galleryImg.attr("style", this.getAttribute("style"));$gallery.fadeIn(100);});$gallery.on("click", function() {$gallery.fadeOut(100);});//删除图片$(".weui-gallery__del").click(function() {$uploaderFiles.find("li").eq(index).remove();$('#uploaderInput').val('');});});
</script>

php处理数据（Thinkphp5）

public function add($ids = '')
{if ($this->request->isPost()) {$tid = $this->request->post('tid');$content = $this->request->post('content/a');foreach ($content as $k=>$v){$content[$k] =  str_replace("../public","",$v);}$data = ['tid'   =>  $tid,'ssl'   => $this->ssl->id,'ssh'   =>  $this->ssh->id,'user_id'   =>  $this->auth->id,'content'   =>  json_encode($content),];$weishengjiancha_data = new Form;$result = $weishengjiancha_data->where('tid',$tid)->where('ssl',$this->ssl->id)->where('ssh',$this->ssh->id)->find();if(!$result){$weishengjiancha_data->save($data);$this->success('填报成功');}else{$this->error('已经填报');}}$this->assign('tid',$ids);return $this->view->fetch();
}public function upload()
{if ($this->request->isPost()) {$img  = isset( $_POST [ 'img' ])?  $_POST [ 'img' ] :  '' ;return $this->base64_image_content($img,'../public/uploads/');}
}/*** 将Base64图片转换为本地图片并保存* @param  $base64_image_content 要保存的Base64* @param  $path 要保存的路径*/
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())."/";if(!file_exists($new_file)){//检查是否有该文件夹，如果没有就创建，并给予最高权限mkdir($new_file, 0700);}$new_file = $new_file.time().".{$type}";   //图片名以时间命名//保存为文件if (file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_image_content)))){//返回这个图片的路径$image = \think\Image::open($new_file);// 按照原图的比例生成一个最大为500*500//$image->thumb(500, 500)->save($new_file);$image->thumb(500, 500)->text(config('site.footer'),ROOT_PATH.'public/Alibaba-PuHuiTi-Bold.ttf',20,'#ffffff')->save($new_file);return $new_file;}else{return false;}}else{return false;}
}

php处理微信weui图片上传相关推荐

【坑爹微信】微信JSSDK图片上传问题和解决
目录 List 1. 那一抹淡淡的忧伤-–微信开发基础 2. 用纯js是不可能用纯js了,这辈子都不用纯js了 -– 微信JSSDK开发以及问题解答 3. 要你命3000 -- 微信支付开发系列问题解 ...
微信开发图片上传阿里云 oss 服务器
在做微信开发时,我需要将图片上传至阿里云OSS,思路是服务端下载微信图片再转存至OSS. wx.chooseImage({count: 1, // 默认9sizeType: ['original', ...
MVC微信浏览器图片上传（img转Base64）
因公司业务需要,需要做一个微信公众号里的图片上传功能,主要用到的技术就是 img转base64 上到服务器话不多说, 贴代码先看前端显示出来的东西 OK 图片不重要,看代码 <!--微信图片 ...
微信JS图片上传与下载功能--微信JS系列文章（三）
概述在前面的文章微信JS初始化-- 微信JS系列文章(一)中已经介绍了微信JS初始化的相关工作,接下来本文继续就微信JS的图片上传功能进行描述,供大家参考. 图片上传 $(function(){va ...
微信js-sdk图片上传下载——java完整流程
最近做的一个项目刚好用到微信js-sdk的图片上传接口,在这里做一下总结. 在这里能知道使用js api的基本配置https://mp.weixin.qq.com/wiki?t=resource/re ...
微信jssdk图片上传给服务器,使用微信JSSDK进行图片选择和上传
2015-04-28 2018-08-21 06:20:42 最近我在用 PHP 做某微信公众号的开发,其中用到了微信jssdk进行图片的选择和上传.在参考了微信官方提供的jssdk文档之后,大致有了 ...
微信支付图片上传java_微信开发-----微信公众号调用微信上传图片接口
$(function () { var url = location.href.split('#')[0]; var date = "url=" + url; //get中url指 ...
PHP仿微信,php 仿微信多图片上传预览的功能示例代码
这篇文章主要介绍了PHP仿微信多图片预览上传方法的相关资料,需要的朋友可以参考下生产图片区域,上传按钮#btn可替换自己想要的图片 plupload上传var uploader = new plup ...
微信jssdk图片上传 ios不支持
ios不支持是因为路由跳转的时候指向的是上一个页面的路由所以在需要上传图片的路由里面加入一下代码: beforeEnter:(to,from,next)=>{var u = navigator ...

php处理微信weui图片上传

php处理微信weui图片上传

微信weui上传组件

Jquery代码

php处理数据（Thinkphp5）

php处理微信weui图片上传相关推荐

最新文章

热门文章