thinkphp5 結合plupload 實現多圖片的上傳
阿新 • • 發佈：2018-12-14
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');