很早之前就想学习TP5的多图上传插件，1年半都想学，百度了很久都看的云里雾里，今天终于会用在项目里了，代码也是网上找的。
这里要重点说明下，Thinkphp5提供的语法和快捷方法太多，查询数据的方式好几种，我这里数据库查询是在model里做了封装，例如 GoodsFilesModel。所以很多新手就会挂在这个地方，多去查下TP5的数据操作手册，和理解你自己看的课程的数据库封装模式，从而选择适合的自己的数据库操作语句。
毕竟没有一套实战课程把所有的日常功能都做完，然后把别的视频有的功能放到另个项目里就各种不对，原因就是TP5提供的方法很多，只能是多看多做几个项目，慢慢就理解了。
1、TP5下载图片上传类库，TP5默认extend扩展文件夹是没有upload的，
（1）扩展库下载地址
https://github.com/top-think/thinkphp-extend
（2）把解压出来的com和org文件夹放到 网站根目录下thinkphp/extend目录下
TP5.1
image.png
（3）TP5后台控制器需要引入
image.png
2、前后台
（1）引入2个样式文件和4个js文件,地址改成自己的外网的可以不用改，为了速度建议下载到本地
如果你的前端框架是基于bootstrap的可以不用引入
样式文件引入
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/admin/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
js文件引入
<script type="text/javascript" src="/static/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="/static/admin/fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/static/admin/fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
（2）模版表单
<body>
<div class="page-container">
<form action="{:url('office/product_add_goods')}" method="post" class="form form-horizontal" id="form-article-add">
<div class="form-group">
<label class="col-sm-2 control-label">上传图片：</label>
<div id="formimageshow" class="formControls col-xs-2 col-sm-2">
<button id="buttonShow" type="button" class="btn btn-success" onclick="upliadfileshow();return false;">上传轮播图片</button>
<br />
<br />
<label for="checkbox-1">最多支持4张轮播图</label>
</div>
</div>
<div class="form-group">
<!-- 图片上传 -->
<div id="modal-webuploader" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
<div class="modal-dialog" style="width:660px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" id="close" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<ul class="nav nav-pills" role="tablist">
<li id="li_upload" class="active" role="presentation"><a href="#upload" aria-controls="upload" role="tab" data-toggle="tab" onclick="$('#select').hide();">上传图片</a></li>
</ul>
<div class="modal-body tab-content">
<div role="tabpanel" class="tab-pane network" id="network">
</div>
<div role="tabpanel" class="tab-pane upload active" id="upload">
<div id="uploader" class="uploader">
<input id="file-0" class="file" type="file" multiple="" data-min-file-count="1" />
<br/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<!-- 图片上传 -->
</div>
</body>
（3）前端图片上传、预览、删除相关js
<script type="text/javascript">
// 图片上传
function upliadfileshow(){
$("#modal-webuploader").fadeIn();
$("#modal-webuploader").fadeIn('slow');
}
$("#close").click(function(){
$("#modal-webuploader").fadeIn();
$("#modal-webuploader").fadeOut('slow');
})
function deleteImage(id){
$.ajax({
url:'{:url("office/product_del_images")}',
type:'get',
data:{id:id},
dataType:'json',
success:function(data){
if(data==1){
$('#imageDelete'+id).remove();
var imagepath=$('input[class=imagepath]');
if(imagepath.length<4){
$('#buttonShow').removeAttr("disabled");
}else{
}
}else{
alert('删除失败');
}
}
})
}
//图片上传
initFileInput("file-0", "{:url('product_add_images')}");
//初始化fileinput控件（第一次初始化）
function initFileInput(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions : ['jpg', 'png','gif','jpeg'],//接收的文件后缀
showUpload: true, //是否显示上传按钮
showCaption: true,//是否显示标题
showPreview:true,//是否显示文件的预览图。默认值true。
showRemove:true,//是否显示删除/清空按钮。默认值true。
browseClass: "btn btn-primary", //按钮样式
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
maxFileCount: 4,//表示允许同时上传的最大文件个数
dropZoneEnabled:true,//是否显示拖拽区域
initialPreviewConfig: {
caption: ctrlName,
width: '120px',
url: uploadUrl,
key: 101,
success: function() {
}
}
});
}
$("#file-0").on("fileuploaded", function (event, data, previewId, index) {
var div=$('<div class="input-group " id="imageDelete'+data.response['id']+'" style="margin-top:.5em;margin-right:2em; float:left;"><input type="hidden" name="imagepath[]" class="imagepath" value="'+data.response['id']+'"/><img src="'+data.response['imagepath']+'"; class="img-responsive img-thumbnail" width="150"><a class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="deleteImage('+data.response['id']+')">×</a></div>');
$('#formimageshow').after(div);
var imagepath=$('input[class=imagepath]');
if(imagepath.length>=4){
$('#buttonShow').attr("disabled","disabled");//禁用上传按钮
$("#modal-webuploader").fadeIn();//关闭上传
$("#modal-webuploader").fadeOut('slow');
}else{
}
});
</script>
（4）TP5.18后台 图片上传方法 和 图片删除方法
保存图片路径到数据库，有个返回存入的id值， TP5.0可以使用add() 但是TP5.1 要使用insertGetId() ，用save()是保存并获取条数。
//商品图片上传
public function product_add_images(){
$upload = new \org\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath = './static/files/'; // 设置附件上传目录 // 上传文件
$upload->saveName=time().rand(1111,9999);
$date=date("Y-m-d",time());//已上传日期为子目录名
$upload->saveExt="png";//上传的文件后缀
$info = $upload->upload();
if(!$info) {// 上传错误提示错误信息
$this->error($upload->getError());
}else{// 上传成功
$m = new GoodsFilesModel();
$data['filepath']='/static/files/'.$date."/".$upload->saveName.".".$upload->saveExt;
$result=$m->insertGetId($data);
$file=['id'=>$result,'imagepath'=>$data['filepath']];
echo json_encode($file);
}
}
//商品图片删除
public function product_del_images(){
$m = new GoodsFilesModel();
$result=$m->destroy($_GET['id']);
if($result){
echo 1;
}else{
echo 0;
}
}
2、效果展示
选择图片
image.png
删除并更换1张图片
image.png
上传中
image.png
上传成功
image.png
删除2张试下
image.png
3、数据库
已成功插入数据,插入数据库时记得使用通过insertGetId() 方法返回id，后面要用到
image.png
4、还需要把这个商品的返会的ID——>储存在该商品数据表的一个字段中——>修改编辑及前台遍历显示图片。
（方法更新中）
下图是商品表，imagepath字段保留该商品所有图片id，后续前台轮播图和商品修改时就可以使用了。
image.png
5、项目前台完整代码
反复测试，已经把没有用的代码全部删除掉了。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/admin/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
</head>
<body>
<!-- 图片上传 -->
<div class="page-container">
<form action="{:url('office/product_add_goods')}" method="post" class="form form-horizontal" id="form-article-add">
<div class="form-group">
<label class="col-sm-2 control-label">上传图片：</label>
<div id="formimageshow" class="formControls col-xs-2 col-sm-2">
<button id="buttonShow" type="button" class="btn btn-success" onclick="upliadfileshow();return false;">上传轮播图片</button>
<br />
<br />
<label for="checkbox-1">最多支持4张轮播图</label>
</div>
</div>
<div class="form-group">
<div id="modal-webuploader" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
<div class="modal-dialog" style="width:660px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" id="close" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<ul class="nav nav-pills" role="tablist">
<li id="li_upload" class="active" role="presentation"><a href="#upload" aria-controls="upload" role="tab" data-toggle="tab" onclick="$('#select').hide();">上传图片</a></li>
</ul>
<div class="modal-body tab-content">
<div role="tabpanel" class="tab-pane network" id="network">
</div>
<div role="tabpanel" class="tab-pane upload active" id="upload">
<div id="uploader" class="uploader">
<input id="file-0" class="file" type="file" multiple="" data-min-file-count="1" />
<br/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<!-- 图片上传 -->
</div>
</body>
<script type="text/javascript" src="/static/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="/static/admin/fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/static/admin/fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
// 图片上传
function upliadfileshow(){
$("#modal-webuploader").fadeIn();
$("#modal-webuploader").fadeIn('slow');
}
$("#close").click(function(){
$("#modal-webuploader").fadeIn();
$("#modal-webuploader").fadeOut('slow');
})
function deleteImage(id){
$.ajax({
url:'{:url("office/product_del_images")}',
type:'get',
data:{id:id},
dataType:'json',
success:function(data){
if(data==1){
$('#imageDelete'+id).remove();
var imagepath=$('input[class=imagepath]');
if(imagepath.length<4){
$('#buttonShow').removeAttr("disabled");
}else{
}
}else{
alert('删除失败');
}
}
})
}
//图片上传
initFileInput("file-0", "{:url('product_add_images')}");
//初始化fileinput控件（第一次初始化）
function initFileInput(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions : ['jpg', 'png','gif','jpeg'],//接收的文件后缀
showUpload: true, //是否显示上传按钮
showCaption: true,//是否显示标题
showPreview:true,//是否显示文件的预览图。默认值true。
showRemove:true,//是否显示删除/清空按钮。默认值true。
browseClass: "btn btn-primary", //按钮样式
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
maxFileCount: 4,//表示允许同时上传的最大文件个数
dropZoneEnabled:true,//是否显示拖拽区域
initialPreviewConfig: {
caption: ctrlName,
width: '120px',
url: uploadUrl,
key: 101,
success: function() {
}
}
});
}
$("#file-0").on("fileuploaded", function (event, data, previewId, index) {
var div=$('<div class="input-group " id="imageDelete'+data.response['id']+'" style="margin-top:.5em;margin-right:2em; float:left;"><input type="hidden" name="imagepath[]" class="imagepath" value="'+data.response['id']+'"/><img src="'+data.response['imagepath']+'"; class="img-responsive img-thumbnail" width="150"><a class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="deleteImage('+data.response['id']+')">×</a></div>');
$('#formimageshow').after(div);
var imagepath=$('input[class=imagepath]');
if(imagepath.length>=4){
$('#buttonShow').attr("disabled","disabled");//禁用上传按钮
$("#modal-webuploader").fadeIn();//关闭上传
$("#modal-webuploader").fadeOut('slow');
}else{
}
});
</script>
</html>
