Layer图片上传，删除功能原创
上传部分表单
<tr>
<td>banner图片：</td>
<td>
<div class="col-sm-3">
<input type="text" class="form-control" style="width:350px;margin-left:-15px;" name="image" id="image" value="{$info.image}" >
</div>
<div class="col-sm-3">
<input type="button" class="btn btn-default" on
<!--image_img image要注意一定要是input的ID值-->
<div id="image_img" width="98%" style="border:1px solid green;"></div>
</div>
</td>
</tr>
GetUploadify(4'articleimg''article''') 可以写成
GetUploadify(4'articleimg''article''JS调用方法名')
点击调用方法
/*
* 上传图片 后台专用
* @access public
* @null int 一次上传图片张图
* @elementid string 上传成功后返回路径插入指定ID元素内
* @path string 指定上传保存文件夹默认存在Public/upload/temp/目录
* @callback string 回调函数(单张图片返回保存路径字符串，多张则为路径数组 )
*/
function GetUploadify(numelementidpathcallback)
{
var upurl ='/index.php?m=Admin&c=Uploadify&a=upload&num='+num+'&input='+elementid+'&path='+path+'&func='+callback; //调用自己的PHP上传方法
layer.open({
type : 2
ti
area : [ '500px' '500px' ]
fix : false //
content : upurl
end : function() {
//console.log(22222)
dataTable.reloadTable();
}
});
}
返回的JOSN:
{"url":"\/Public\/upload\/article\/2020\/09-23\/5f6ab1feeb5fe.jpg""ti
这个窗口代码：文件名upload.html
layui.css、layui.js、jquery-3.2.1 这三个文件自己网上找吧，我就不贴出来了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xm
<head>
<me
<ti
<li
<li
<li
<script src="__PUBLIC__/layui/layui.js?t=1598935358940" charset="utf-8"></script>
<script src="__PUBLIC__/js/jquery-3.2.1_b5dbe7b.js" type="text/javascript"></script>
</head>
<body>
<div class="W">
<div class="Bg"></div>
<div class="Wrap" id="Wrap">
<div class="Cont">
<p class="Note">最多上传<strong>{$info.num}</strong>个附件单文件最大<strong>{$info.size}</strong>类型<strong>{$info.type}</strong></p>
<p class="Note">请确认图片后在点击保存，</p>
<div class="flashWrap">
<button type="button" class="layui-btn" id="uploadimg">图片上传</button>
<!-- <span><input type="checkbox" name="iswatermark" id="iswatermark" /><label>是否添加水印</label></span>-->
</div>
<div class="fileWarp">
<fieldset>
<blockquote class="fileWarp">
预览图：
<div class="layui-upload-list-img" id="imgurl">
<if condition="empty($info.articleimg1) neq true">
{$info.articleimg1}
</if>
</div>
</blockquote>
</fieldset>
</div>
<div class="btnBox">
<button class="btn" id="SaveBtn">保存</button>
</div>
</div>
</div>
</div>
<script>
/*var call_back = '{$info.call_back}';
$("#SaveBtn").on("click"function(){
var arr =[];
$("input[name='articleimg']").each(function(){
arr.push($(this).val());
})
var imgs = arr.join("");
if (call_back == 'call_back'){
$("#{$info.input}"window.parent.document).val(imgs);
}else {
}
var index = parent.layer.getFrameIndex(window.name);
//parent.$("#{$info.input}").attr("value"imgs);
parent.layer.close(index);
});*/
/*点击保存按钮时
*判断允许上传数，检测是单一文件上传还是组文件上传
*如果是单一文件，上传结束后将地址存入$input元素
*如果是组文件上传，则创建input样式，添加到$input后面
*隐藏父框架，清空列队，移除已上传文件样式*/
$("#SaveBtn").click(function(){
var callback = "{$info.func}";
var num = {$info.num};
var fileurl_tmp = [];
var arr =[];
var index = parent.layer.getFrameIndex(window.name);
if(callback != "undefined"){
if(num > 1){
$("input[name^='articleimg']").each(function(indexdom){
fileurl_tmp[index] = dom.value;
});
}else{
fileurl_tmp = $("input[name^='articleimg']").val();
}
eval('window.parent.'+callback+'(fileurl_tmp)');
parent.layer.close(index);
return;
}
if(num > 1){
var fileurl_tmp = "";
$("input[name='articleimg']").each(function(){
fileurl_tmp += '<img width="100px" height="100px" type="text" src="'+ this.value +'" />';
arr.push($(this).val());
})
var imgs = arr.join("|");
$("#{$info.input}"window.parent.document).val(imgs);
$("#{$info.input}_img"window.parent.document).html(fileurl_tmp);
}else{
$("#{$info.input}"window.parent.document).val($("input[name^='articleimg']").val());
}
parent.layer.close(index);
});
</script>
<script src="__PUBLIC__/js/uploadimg.js"></script>
<script src="/Public/plugins/uploadify/uploadify-move.js" type="text/javascript"></script>
</body>
</html>
uploadimg.js
var articleimg;
var img = []; //便于存储返回值
//console.log(getUrlParam('num'));
var num = getUrlParam('num');//是单个上传还是多个上传
//console.log(getUrlParam('path'));
var savepathroute = getUrlParam('path');//图片目录
if (savepathroute){
savepath = '/Admin/Upload/imageUp?savepath='+savepathroute;
}else {
savepath = '/Admin/Upload/imageUp';
}
var multiple = true; //多个上传
if (num == '1'){
multiple = false;//单个上传
}
layui.use('upload' function() {
var upload = layui.upload;
var $ = layui.jquery;
//多图片上传
var uploadInst = upload.render({
elem: '#uploadimg'
url: savepath //改成您自己的上传接口
multiple: multiple
before: function(obj){
//预读本地文件示例，不支持ie8
obj.preview(function(index file result){
$('#imgurl').append('<div id="uploadid-'+index+'" class="layui-upload-img"><img src="'+ result +'" alt="'+ file.name +'" width="100px" height="100px"><span on
});
}
done: function(resindex){
$('#uploadid-'+index).append('<input type="hidden" name="articleimg" id="articleimg'+index+'" value="'+res.url+'">')
if (multiple==false){
//限制单个上传只可以上传一次
$("#uploadimg").attr('disabled'true);
}
}
});
});
//获取url中的参数
function getUrlParam(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
var r = window.location.search.substr(1).match(reg); //匹配目标参数
if (r != null) return unescape(r[2]); return null; //返回参数值
}
//删除图片
function DEIUploadify(indexid){
var image= $("#articleimg"+indexid).val();
$.get(
'Admin/Uploadify/delupload'{action:"del" filename:image}function(){}
);
$("#uploadid-"+indexid).remove();
}
uploadimg.css
/*图片上方删除的三角*/
.incorrect:before {
content: '\2716';
color: #b20610;
position:absolute;
}
.upload-img{
display: inline-block;
width:100px;
height:100px;
}
.layui-upload-img {
float:left;
margin:6px
}
上传完成点击确认返回的
/Public/upload/article/2020/09-23/5f6aac71abf6f.jpg|/Public/upload/article/2020/09-23/5f6aac71b58f4.jpg 图片路径是中间以逗号分开的
先写到这里，后边有时间整理一下提供全部源码，不过要超级用户才可以，
