文档章节

thinkphp5结合webuploader单页面多按钮上传图片

沐风storm
 沐风storm
发布于 2017/03/15 22:43
字数 691
阅读 310
收藏 1

 

TP5是thinkPHP一个里程碑的框架,有了很多的更新,在图片上传方面,tp5之前,TP5是不判断表单上传的,但是TP5就需要了。如果不指定就会报一个

Call to a member function move() on null这个错误

说道这个问题,我们就要先来看一段完整是TP5后端上传代码

 $file = Request::instance()->file('file'); // file 字段要对应 前台表单里面字段
        $info = $file->validate([
            'size' => 156780,
            'ext' => 'jpg,png,gif'
            ])->rule('md5')->move(ROOT_PATH.'public\uploads');
        $result = array();
        if ($info) {
            $result['url'] = $info->getSaveName();
            $result['status'] = 1;
        } else {
            $result['info'] = $file->getError();
        }
        json_encode($result);

我们可以看到,有一个工厂方法,初始化了一个文件上传

 $file = Request::instance()->file('file'); 

其中->file('file');  里面的 file需要对应前台的 input表单里面的 name属性

 

由于项目需要,一个页面有几个按钮要上传图片或者附件,所以封装成了一个方法如下

使用TP5 定义一下上传路径,swf文件

温馨提示:需要提前引入 Jquery 、Layer、Webuploader的JS文件哦

第一步:

var UPLOAD_URL = "{:url('upload')}";
	var SWF_URL = '__JS__/webuplader/Uploader.swf';
	var SHOW_UP = '__ROOT__/uploads/';

第二步: 

/**
 * webuploader上传案例
 * @param {Object} $idClass 前台类选择器
 * @param {Object} $limit  限制上传的图片数量
 * @param {Object} $isPic  是否是多图上传
 */
function upload($idClass, $limit, $isPic = false) {

	// 初始化Web Uploader
	var uploader = WebUploader.create({
		// 选完文件后,是否自动上传。
		auto: true,
		// swf文件路径
		swf: SWF_URL,
		// 文件接收服务端。
		server: UPLOAD_URL,
		pick: $idClass,
		fileNumLimit: $limit, //限制图片数量
		fileSizeLimit: 10 * 1024 * 1024,
		fileSingleSizeLimit: 2 * 1024 * 1024,
		accept: {
			title: 'file',
			extensions: 'gif,jpg,jpeg,png',
			mimeTypes: 'image/*'
		}
	});

	// 当有文件添加进来的时候
	uploader.on('error', function(handler) {
		if(handler == 'Q_EXCEED_SIZE_LIMIT' || handler == 'F_EXCEED_SIZE') {
			layer.msg('上传图片最大不超过2M');
		}
		if(handler == 'Q_EXCEED_SIZE_LIMIT' || handler == 'F_EXCEED_SIZE') {
			layer.msg('上传图片最大不超过2M');
		}
		if(handler == "Q_EXCEED_NUM_LIMIT") {
			layer.msg("最多选择" + $limit + "张图片");
		}
		if(handler == "F_DUPLICATE") {
			layer.msg("图片已经存在");
		}
	});
	// 当有文件添加进来的时候
	var len = 0;
	uploader.on('fileQueued', function(file) {
		if($isPic) {
			var limit = 4;
			if(len < limit) {
				len++;
			} else {
				uploader.removeFile(file);
				layer.msg("最多上传4张图片");
				return;
			}
			if(len > 3) {
				$($idClass).hide();
			}
			console.log(len);
		}
		uploader.upload();
	});

	// 文件上传过程中创建进度条实时显示。
	uploader.on('uploadProgress', function(file, percentage) {
		layer.load('上传中');
	});
	// 文件上传成功,给item添加成功class, 用样式标记上传成功。
	uploader.on('uploadSuccess', function(file, ret) {
		layer.closeAll();
		if(ret.status == 1) {
			// 上传成功
			var filepath = SHOW_UP + ret.url;
			if($isPic == false) {
				$($idClass).find('img').attr('src', filepath);
				$($idClass).find('input[type=hidden]').val(filepath);
			} else {
				var $listPic = '<input type="hidden" name="picture[]" value="' + filepath + '" />';
				var $imgList = '<img src="' + filepath + '"  style="width:125px;height:205px">';
				$($idClass).before($listPic).siblings('.upload_picture').append($imgList);
			}
		} else {
			layer.msg(ret.info);
			uploader.removeFile(file);
			len--;
		}
		uploader.reset();
	});
	// 文件上传失败,显示上传出错。
	uploader.on('uploadError', function(file, ret) {
		layer.msg('上传失败,请稍后再试!');
		uploader.reset();
	});
}

使用

<script type="text/javascript">
		//上传应用图标
		upload('.uploadIcon',1);
		//上传二维码
		upload('.uploadQrcode',1);
		upload('.uploadpicture',4,true);
</script>

 

© 著作权归作者所有

沐风storm
粉丝 0
博文 10
码字总数 4795
作品 0
武汉
程序员
私信 提问
webuploader一次性上传多张图片到后台,后台如何处理

如题,我用webuploader上传图片,后台用springmvc,上传一张时没有问题,但一次性上传多张的时候,后台我就不知道怎么处理了,作为后台我不知道前端传来几张 这是前端页面代码 这是后台代码 ...

studyforjava
2016/07/26
12.5K
2
WebUploader的缩略图如何在后台保存以及下次打开页面时如何展示的问题

大家好,我的使用场景如下:(我觉得比较通用) 用户在需要专家帮忙的时候需要填写文字信息以及上传图片 可上传多图,每选择一个图片无需点击“上传”按钮而自动上传 上传成功后,出现缩略图...

错觉
2015/12/09
10.5K
6
使用Web Uploader实现多文件上传

引入资源 使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF。 <!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <......

DavidBao
2015/04/15
32.3K
7
大神们,谷歌浏览器53为什么点击上传图片要等很久

我用webuploader上传图片,以前谷歌浏览器版本没升级之前,一切正常。现在谷歌升级之后,点击上传按钮要等很久才弹出文件选择的弹窗。 其次,我用其他的浏览器,如火狐、IE、遨游等等,均没有...

漠沙
2016/10/26
886
2
使用webuploader时报错: Uncaught Error: jQuery or Zepto not found!

使用webuploader时报错:Uncaught Error: jQuery or Zepto not found! 请教大神这要怎么解决?我的代码如下,直接用的官网Getting Started的代码。 选择图片...

一个yuanbeth
2017/09/18
2.5K
2

没有更多内容

加载失败,请刷新页面

加载更多

Mybatis Plus删除

/** @author beth @data 2019-10-17 00:30 */ @RunWith(SpringRunner.class) @SpringBootTest public class DeleteTest { @Autowired private UserInfoMapper userInfoMapper; /** 根据id删除......

一个yuanbeth
今天
4
0
总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
今天
5
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
今天
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部