本文介绍如何使用ThinkPHP5框架实现多张图片的上传功能，包括上传、列表展示、添加、修改和删除操作。文章详细展示了代码实现过程，包括控制器、视图和数据库交互的细节。
PHP页面
<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
class Upload extends Controller{
/*
thinkphp5 整合多图片上传
*/
//列表页
public function index(){
$list=Db::name('multimage')->order('id desc')->select();
$this->assign('list',$list);
return $this->fetch();
}
//添加
public function add(){
return $this->fetch();
}
//多张图片上传添加处理
public function addsave(){
$data=array(
'multimage'=>input("post.multimage"),
'addtime'=>time(),
);
$re=Db::name('multimage')->insert($data);
if($re){
$this->success('添加成功','Upload/index');
}else{
$this->error('添加失败');
}
}
//修改
public function edit(){
$id = input("param.id");
$row=Db::name('multimage')->where(array("id"=>$id))->find();
$row['multimageArray']=array_filter(explode('###', $row['multimage']));
$this->assign('row',$row);
return $this->fetch();
}
//多张图片上传修改处理
public function editsave(){
$data=array(
'multimage'=>input("post.multimage"),
);
$ini = array(
'id' => input("post.id"),
);
$re=Db::name('multimage')->where($ini)->update($data);
if($re){
$this->success('修改成功','Upload/index');
}else{
$this->error('修改失败');
}
}
//删除
public function delete(){
$id = input("param.id");
if(Db::name('multimage')->where("id",$id)->delete()){
$this->success('删除成功','Upload/index');
}else{
$this->error('删除失败');
}
}
//上传的操作
public function upload(){
$typeArr = array("jpg", "png", "gif","jpeg");//允许上传文件格式
define('ROOT',getcwd());
$path = "./uploads/multimage/";//上传路径必须是绝对路径
if (isset($_POST)) {
$name = $_FILES['file']['name'];
$size = $_FILES['file']['size'];
$name_tmp = $_FILES['file']['tmp_name'];
if (empty($name)) {
echo json_encode(array("error"=>"您还未选择图片"));
exit;
}
$type = strtolower(substr(strrchr($name, '.'), 1)); //获取文件类型
if (!in_array($type, $typeArr)) {
echo json_encode(array("error"=>"清上传jpg,png或gif类型的图片！"));
exit;
}
if ($size > (500 * 1024)) {
echo json_encode(array("error"=>"图片大小已超过500KB！"));
exit;
}
$pic_name = time() . rand(10000, 99999) . "." . $type;//图片名称
$pic_url = $path . $pic_name;//上传后图片路径+名称
//echo json_encode(array('error'=>$pic_url));exit();
if (move_uploaded_file($name_tmp, $pic_url)) { //临时文件转移到目标文件夹
$array = array(
'error'=>0,
'pic'=>str_replace("\\","/",'/uploads'.DS.'multimage'.DS.$pic_name), //图片的路径替换
'name'=>$pic_name
);
echo json_encode($array);
} else {
echo json_encode(array("error"=>"上传有误，清检查服务器配置！"));
}
}else{
echo json_encode(array("error"=>"上传有误，清检查服务器配置！"));
}
}
}
add.html页面
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>thinkphp5整合多张图片上传添加</title>
<!-- css样式开始 -->
<style type="text/css">
body{font-family:'微软雅黑';}
.btn{
-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;background-color: #ff8400;color: #fff;display: inline-block;height: 28px;line-height: 28px;text-align: center;width: 72px;transition: background-color 0.2s linear 0s;border:none;cursor:pointer;margin:0 0 20px;}
.demo{width:900px;margin:10px auto;}
.btn:hover{background-color: #e95a00;text-decoration: none;color:#fff;}
.ul_pics{margin-top:10px;margin-left:-35px;}
.ul_pics li{float:left;width:160px;height:160px;border:1px solid #ddd;padding:2px;text-align: center;margin:0 5px 5px 0;list-style:none;}
.ul_pics li .img{width: 150px;height: 140px;display: table-cell;vertical-align: middle;position:relative;}
.ul_pics li img{max-width: 150px;max-height: 140px;vertical-align: middle;}
.progress{position:relative;padding: 1px; border-radius:3px; margin:60px 0 0 0;}
.bar {background-color: green; display:block; width:0%; height:20px; border-radius:3px; }
.percent{position:absolute; height:20px; display:inline-block;top:3px; left:2%; color:#fff }
.span_del{display:block;height:16px;width:16px;position:absolute;top:5px;right:5px;cursor:pointer;background:url(__plupload__/Image/close.png);display:none;}
input,button,submit,textarea,option,textarea{font-family:'微软雅黑';}
.baocun{cursor:pointer;}
.clear{clear:both;}
<!-- css样式结束 -->
</style>
</head>
<body>
<a href="{:url('upload/index')}">返回首页</a>
<form action="{:url('upload/addsave')}" method="post">
<div class="demo">
<a class="btn" id="btn">上传图片</a> 最大500KB，支持jpg，gif，png格式。
<ul id="ul_pics" class="ul_pics clearfix"></ul>
<input type='hidden' name="multimage" id="multimage" />
<div class="clear"></div>
<div><input type="submit" value="提交" /></div>
</div>
</form>
<script type="text/javascript" src="__plupload__/Js/jquery.js"></script>
<script type="text/javascript" src="__plupload__/Library/plupload/plupload.full.min.js"></script>
<script type="text/javascript">
var uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
browse_button: 'btn',
url: "{:url('Upload/upload')}",
flash_swf_url: '__plupload__/Library/plupload/Moxie.swf',
silverlight_xap_url: '__plupload__/Library/plupload/Moxie.xap',
filters: {
max_file_size: '500kb',
mime_types: [
{title: "files", extensions: "jpg,png,gif"}
]
},
multi_selection: true,
init: {
FilesAdded: function(up, files) {
if ($("#ul_pics").children("li").length > 30) {
alert("您上传的图片太多了！");
uploader.destroy();
} else {
var li = '';
plupload.each(files, function(file) {
li += "<li class='li_image' id='" + file['id'] + "'>" +
"<div class='progress'><span class='bar'></span><span class='percent'>0%</span></div></li>";
});
$("#ul_pics").append(li);
uploader.start();
}
},
UploadProgress: function(up, file) {
var percent = file.percent;
$("#" + file.id).find('.bar').css({"width": percent + "%"});
$("#" + file.id).find(".percent").text(percent + "%");
},
FileUploaded: function(up, file, info) {
var data = eval("(" + info.response + ")");
console.log(data.pic);
$("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/><span class='span_del'></span></div>");
var old=$("#multimage").val();
$("#multimage").val(old + data.pic+'###');
},
Error: function(up, err) {
alert(err.message);
}
}
});
uploader.init();
</script>
<script type="text/javascript">
$(function(){
$(".demo").on("mouseover",'.li_image',function(){
$(this).find(".span_del").show();
})
$(".demo").on("mouseout",'.li_image',function(){
$(this).find(".span_del").hide();
})
$("#ul_pics").on("click",'.span_del',function(){
var src=$(this).siblings('img').attr('src');
var multimage=$("#multimage").val();
var new_multimage=multimage.replace(src+'###', '');
$("#multimage").val(new_multimage);
$(this).parents('li.li_image').remove();
})
})
</script>
</body>
</html>
数据库:
/*
Navicat MySQL Data Transfer
Source Server : 127.0.0.1
Source Server Version : 50553
Source Host : localhost:3306
Source Database : miyun
Target Server Type : MYSQL
Target Server Version : 50553
File Encoding : 65001
Date: 2018-10-10 17:51:26
*/
SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `gok_multimage`
-- ----------------------------
DROP TABLE IF EXISTS `gok_multimage`;
CREATE TABLE `gok_multimage` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键id',
`multimage` text COMMENT '多张图片',
`addtime` varchar(255) DEFAULT NULL COMMENT '添加时间',
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=12 DEFAULT CHARSET=utf8 COMMENT='多张图片上传表';
-- ----------------------------
-- Records of gok_multimage
-- ----------------------------
INSERT INTO `gok_multimage` VALUES ('7', '/demo/Data/Uploads/multimage/148731139531533.jpg###/demo/Data/Uploads/multimage/148731139596025.jpg###', '1487311399');
INSERT INTO `gok_multimage` VALUES ('11', '/uploads/multimage/153916297679973.jpg###/uploads/multimage/153916297660213.jpg###/uploads/multimage/153916394396799.jpg###', '1539162977');
INSERT INTO `gok_multimage` VALUES ('10', '/uploads\\multimage\\153916259859133.jpg###/uploads\\multimage\\153916259944527.jpg###', '1539162600');
扫一扫
266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
