<?php
public function savemoreimg(){
$request = $this->request;
if ($request->isPost())
{
$param = $request->post('file/a');
if(!is_array($param))
{
return ['st'=>1,'msg'=>'图片上传失败'];
}
$up_dir = 'upload'.DS.'sgxt'.DS.date('Ymd',time()).DS;//存放在当前目录的upload文件夹下
mkdirs($up_dir);
$imgurl="";
$error=0;
foreach ($param as $k=>$v)
{
$base64_img = trim($v);
if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result)){
$type = $result[2];
if(in_array($type,array('pjpeg','jpeg','jpg','gif','bmp','png'))){
$new_file = $up_dir.time().'.'.$type;
if(file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_img)))){
$img_path = str_replace('../../..','', $new_file);
$imgurl .=DS.$img_path.",";
}else{
return ['st'=>1,'msg'=>'上传失败,请重试'];
}
}else{
//文件类型错误
return ['st'=>1,'msg'=>'文件类型错误'];
}
}
}
return ['st'=>0,'error'=>$error,'imgurl'=> substr($imgurl,0,strlen($imgurl)-1)];
}
}
?>
<--html:-->
<!--存放路径的-->
<input type="hidden" id="pic_urls" name="pic_urls" />
<!--显示图片的-->
<div style="width: auto;float:left;max-height: 130px" id="moreimg">
</div>
<!--选择图片按钮-->
<input class="inputfile" type="file" multiple id="morefile" value="more_get_img" accept="image/*">
<!--上传图片按钮-->
<span class="inputpost" id="more_img_put">上传图片</span>
<--css:-->
<style>
.mainimg {
width: 130px;
height: 130px;
position: relative;
float: left;
margin: 5px;
}
.mainimg .div_img_close {
position: absolute;
right: 2px;
z-index: 99999;
font-size: 20px;
color: #3498db;
top: 2px;
display: block;
width: 20px;
height: 20px;
line-height: 17px;
background-color: #fff;
cursor: pointer;
text-align: center;
border-radius: 50%;
}
.inputpost {
display: block;
float: left;
width: 100px;
height: 26px;
line-height: 26px;
text-align: center;
background-color: #2288cc;
color: #fff;
cursor: pointer;
}
</style>
<--js:-->
<script>
function getObjectURL(file) {
let url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
function getBase64Image(img) {
let canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, img.width, img.height);
let ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
let dataURL = canvas.toDataURL("image/"+ext);
return dataURL;
}
// 多图上传
let mopic=new Array();
let input_img=new Array();
let neijing ="";
if(neijing.length>=2)
{
let result=neijing.split(",");
mopic=result;
for(let n=0;n<result.length;n++){
let divimg ="<div class='mainimg'><img src='"+result[n]+"' class='divimg'/><span class='div_img_close' data-id='"+n+"'>x</span></div>";
$('#moreimg').append(divimg);
}
}
$("#morefile").on("change",function(){
let divimg="";
for (let j=0;j<this.files.length;j++)
{
let objUrl = getObjectURL(this.files[j]) ; //获取图片的路径,该路径不是图片在本地的路径
if (objUrl){
let image = new Image();
image.src = objUrl;
image.onload = function(){
let base64 = getBase64Image(image);
// console.log(base64);
mopic.push(base64);
let mopic_len=mopic.length-1;
// console.log(mopic_len);
divimg ="<div class='mainimg'><img src='"+base64+"' class='divimg'/><span class='div_img_close' data-id='"+mopic_len+"'>x</span></div>";
$('#moreimg').append(divimg);
};
}
}
});
$("#moreimg").on("click",".div_img_close",function(){
let id= $(this).attr('data-id');
console.log(mopic);
if(isNaN(id)||id>=mopic.length){
return false;
}
for(let i=0,n=0;i<mopic.length;i++){
if(mopic[i]!==mopic[id]){
mopic[n++]=mopic[i];
}
}
mopic.length-=1;
$("#moreimg .mainimg").remove();
$("#pic_urls").val(mopic.join(','));
$(this).parent().remove();
for (let m=0;m<mopic.length;m++)
{
let divimg ="<div class='mainimg'><img src='"+mopic[m]+"' class='divimg'/><span class='div_img_close' data-id='"+m+"'>x</span></div>";
$('#moreimg').append(divimg);
}
//input框内容 改变
if(isNaN(id)||id>=input_img.length){
return false;
}
for(let i=0,n=0;i<input_img.length;i++){
if(input_img[i]!==input_img[id]){
input_img[n++]=input_img[i];
}
}
input_img.length-=1;
$("#pic_urls").val(input_img.join(','));
});
//进行上传
let check=true;
$('#more_img_put').click(function () {
if(mopic.length<1)
{
layer.msg('请先选择图片,在进行上传!');
return false;
}
if(!check)
{
layer.msg('正在进行上传,请勿重复点击!', {icon: 5});
return false;
}
check=false;
$.ajax({
url: "/admin/Store/savemoreimg",
type: "POST",
dataType: 'json',
data: {'file':mopic},
success: function (data) {
if(parseInt(data.st)==0)
{
check=true;
let val=$('#pic_urls').val();
if(val.length>5)
{
$("#pic_urls").val( $("#pic_urls").val()+","+data.imgurl);
}else{
$("#pic_urls").val(data.imgurl);
}
let arr = data.imgurl.split(',');
for (let o=0;o<arr.length;o++)
{
input_img.push(arr[o]);
}
layer.msg('上传成功!', {icon: 6});
}else{
check=true;
layer.msg(data.msg, {icon: 5});
}
},
error: function () {
check=true;
layer.msg('上传失败,请重试...', {icon: 5});
}
});
})
</script>