Dzⅹ3.4万能上传插件，多端兼容，多浏览器实测
调用Dzⅹ3.4新版内置PC端H5上传组件实现移动端兼容
HTML+JS+CSS完整单页
<!--原创声明:-->
<!--
DISCUZx3.4万能图片上传插件,作者：青花，问题反馈微信：KDDS888888；
此上传插件兼容X3.4所有手机版的模板和以下浏览器:
夸克、Q浏、绿茶、火狐、360、猎豹、H5浏、谷歌浏、百度浏、欧朋浏、小米浏、华为浏、OV浏、搜狗、ⅰe6/7/8/9、edg、UC等十多款主流的浏览器，均经过PC+手机双端实测。有细微显示差别，功能均正常。
转载或使用请勿删除此信息，个人博客：http://kedoutd.cn/，交流社区：https://wdc.store/
-->
<!--使用方法:-->
<!--
方法1：直接覆盖替换/template/手机模板位置/home/spacecp_upload.htm
方法2：将此文件创建之后放到/template/default/mobile，然后在手机模板创建菜单进行调用
调用地址：href="home.php?mod=spacecp&ac=upload&mobile=1
-->
<!--PC端头部声明-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--声明结束-->
<!--head开始-->
<head>
<!--移动端兼容声明-->
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<!--移动端兼容声明结束！上面的1.0为各项参数，可根据需要调整对应缩放大小和设备高宽等比，一般建议默认1.0-->
<!--全局CSS样式，采用ID+标签+CLASS三种写法-->
<!--
[#]开头的在页面中使用[id=""] 引用；
[·] 开头的使用[class=""]引用；
白标签无需插入引用，直接对应标签，例如<div>
说明：CSS样式混合写法可以有效规避既包含公共样式又包含独立样式的显示异常的问题。
-->
<style type="text/css">
html{
overflow:hidden;
overflow-x:none;
}
body {
background-color:#fff;
width:97.6%;
overflow:hidden;
}
p {
color:blue
}
li {
list-style:none;
float:left;
margin-bottom:20px;
margin-top:5px;
text-align:center;
}
ul{
width:100%;
margin-left:-25px;
}
div{
width:97%;
}
button{
margin-bottom:30px;
height:40px;
width:100px;
border:2px inset #00E5EE;
border-radius:5px;
background: #00BFFF;
color:#fff;
font-size:18px;
}
tab{
color:transparent;
padding-right:20px;
}
label{
font-size:16px;
color:#CC2EFA;
}
#li_a{
background:green;
color:#fff;
font-size:18px;
line-height:30px;
border-radius:5px;
text-align:center;
padding:5px 10px 3px 10px ;
border:2px solid #FFBF00;
}
#up_tb{
width:100%;
}
#th{
width:120px;
color:black;
height:30px;
font-size:18px;
color:#8A2BE2;
}
#tishi{
margin-top:-5px;
margin-bottom:10px;
font-size:15px;
}
.btn{
background-color:green;
color:#fff;
font-size:16px;
margin-top:0px;
padding-top:5px;
margin-bottom:5px;
border-radius:10px;
width:100px;
}
.h2_bq{
height:40px;
background-color:#EE3B3B;
color:#fff;
line-height:40px;
font-size:18px;
text-align:center;
width:100%;
margin-left:-5px;
}
.td{
border:3px inset #FFBF00;
margin:3px 3px 3px 3px;
border-radius:5px;
width:94%;
height:25px;
background:#BEF781;
outline:none;
font-size:20px;
color:#FF0040;
}
.td2{
border:3px inset #FFBF00;
margin:3px 3px 3px 3px;
border-radius:5px;
width:94%;
height:25px;
background:#BEF781;
outline:none;
font-size:20px;
color:#04B45F;
}
.td3{
border:3px inset #FFBF00;
margin:3px 3px 3px 3px;
border-radius:5px;
width:96.5%;
height:35px;
background:#BEF781;
outline:none;
font-size:18px;
color:#FA5882;
}
.td4{
border:3px inset #FFBF00;
margin:3px 3px 3px 3px;
border-radius:5px;
width:90.5%;
height:30px;
background:#BEF781;
outline:none;
font-size:16px;
color:#FA5882;
padding-left: 5px;
}
.td_box{
height:30px;
background-color:#EE3B3B;
border-radius:5px;
}
.td_box2{
height:26px;
background-color:#EE3B3B;
border-radius:5px;
line-height:12px;
border:2px inset #FFBF00;
}
.td_box3{
width:auto;
height:26px;
background-color:#EE3B3B;
border-radius:5px;
line-height:12px;
border:2px inset #FFBF00;
padding-left:5px;
padding-right:5px;
}
.div{
overflow:scroll;
}
.kuang{
border-radius:5px;
border:2px solid #FFBF00;
width:96.5%;
font-size:13px;
color:#0080FF;
padding-left:8px;
padding-right:8px;
z-index:999;
}
.span{
padding-bottom:10px;
color:red;
font-size:14px;
}
h2{
color:green;
}
.xuanze{
width:100%;
height:30px;
border-radius:5px;
border:2px solid #FFBF00;
}
.font{
font-size:15px;
color:#1C1C1C;
}
.up_kuang{
padding:13px 9px 11px 13px;
border:3px inset #fff013;
border-radius:5px;
width:auto;
background-color:#fff033;
margin-bottom:20px;
}
.up_kuang2{
overflow-x:auto;
width:auto;
background-color:#fff033;
}
.inp{
width:99%;
border-radius:5px;
}
</style>
<!--新增相册隐私设置调用JS-->
<!--{if $_G['basescript'] == 'home'}-->
<script type="text/javascript" src="{$_G[setting][jspath]}home.js?{VERHASH}"></script>
<!--{/if}-->
<!--新增相册隐私设置JS调用结束-->
<!--创建相册功能切换JS调用-->
<script type="text/javascript" src="{$_G[setting][jspath]}common.js?{VERHASH}"></script>
<!--创建相册功能切换JS调用结束-->
</head>
<!--head结束-->
<!--页面标题-->
<h2 class="h2_bq">
您正在准备创建新相册
</h2>
<!--标题结束-->
<!--顶层盒子控制整个页面的宽度，自适应移动设备-->
<div>
<!--顶部自定义菜单部分-->
<ul>
<!--li标签中的链接可以根据需求自行更换-->
<li style="width:19%"><a id="li_a" href="forum.php">首页</a></li>
<li style="width:19%"><a id="li_a" href="forum.php?forumlist=1">社区</a></li>
<li style="width:19%"><a id="li_a" href="group.php">圈子</a></li>
<li style="width:19%"><a id="li_a" href="home.php">我的</a></li>
<li style="width:19%"><a id="li_a" onClick="javascript :history.back(-1);">返回</a></li>
</ul>
<!--顶部自定义菜单结束-->
<!--上传事件判断相关-->
<!--{if empty($_GET['op'])}-->
<!--页面顶层框体-->
<form method="post" autocomplete="off" id="albumform" action="home.php?mod=spacecp&ac=upload" onsubmit="return validate(this);">
<!--分割线-->
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3);margin-left:2px;" width="100%" color=#987cb9 SIZE=1>
<!--分割线结束-->
<!--图片上传框体-->
<div class="kuang">
<h2>1. 选择新相册的封面图
<p>
<span class="span"> 相册封面的尺寸比例不限制，支持多图批量上传,请保持在2048KB以内，超出尺寸的图片将会被过滤掉。</span>
</p>
</h2>
<center>
<div id="tishi">上传完成后，右滑可以添加图片描述
</div>
</center>
<!--上传子框体-->
<div class="up_kuang">
<!--上传按钮和横向滑动层布局控制框体-->
<div class="up_kuang2">
<table cellspacing="0" cellpadding="0" id="tab">
<tbody id="attachbody">
</tbody>
</table>
<!--上传状态提示、图片预览、图片描述输入框-->
<div id="imgUploadProgress"></div>
<div><span id="imgSpanButtonPlaceholder"></span></div>
</div>
</div>
<!--图片上传框体结束-->
<!--上传事件判断-->
<!--{if empty($_G['setting']['pluginhooks']['spacecp_upload_extend'])}-->
<!--如果触发上传事件则引入上传组件-->
<!--{subtemplate common/upload}-->
<!--JS传参组件-->
<script type="text/javascript">
var upload = new SWFUpload({
// 后端传参设置
upload_url: "{$_G[siteurl]}misc.php?mod=swfupload&action=swfupload&operation=album", //上传链接
post_params: {"uid" : "$_G[uid]", "hash":"$swfconfig[hash]"}, //参数提交
// 文件上传设置
file_size_limit : "2MB", // 指定上传文件大小
file_types : "$swfconfig[imageexts][ext]", // 文件类型
file_types_description : "$swfconfig[imageexts][depict]", //
file_upload_limit : 0, //文件大小上传限制
file_queue_limit : 0, //同时可以上传多少个文件
// 事件处理程序设置，所有处理程序都在Handler.js程序文件中执行）
swfupload_preload_handler : preLoad, //多文件上传处理程序
swfupload_load_failed_handler : loadFailed, //文件加载失败处理
file_dialog_start_handler : fileDialogStart, //显示文件对话框
file_queued_handler : fileQueued, //文件列队
file_queue_error_handler : fileQueueError, //文件列队错误
file_dialog_complete_handler : fileDialogComplete, //文件上传完成对话框
upload_start_handler : uploadStart, //上传事件开始
upload_progress_handler : uploadProgress, //上传进度提示
upload_error_handler : uploadError, //上传过程发生错误
upload_success_handler : uploadSuccess, //上传成功
upload_complete_handler : uploadComplete, //上传完成
// 按钮显示设置
button_image_url : "{IMGDIR}/uploadbutton.png", //上传按钮背景图链接，这里调用的是DZ的默认背景图，因为懒
button_placeholder_id : "imgSpanButtonPlaceholder", //按钮占位符，在不兼容按钮背景图的设备上才会呈现，否则隐藏在背景图的后面
button_width: 100, //按钮背景图的宽度，建议值=背景图宽度
button_height:25, //按钮背景图的高度，建议值=背景图高度
button_cursor:SWFUpload.CURSOR.HAND, //按钮光标效果
button_window_mode: "transparent", //按钮窗口背景颜色，这里是透明的
//自定义参数设置
custom_settings : {
progressTarget : "imgUploadProgress", //上传目标进度
uploadSource: 'home', //上传事件对应源，个人主页
uploadType: 'album', //文件类型，相册
imgBoxObj: $('attachbody') //上传盒子模型
},
// 调试设置
debug: false //关闭调试
});
</script>
<!--JS传参组件结束-->
<!--上传结果跳转只反馈页面-->
<!--{else}-->
<!--{hook/spacecp_upload_extend}-->
<!--{/if}-->
<!--上传事件判断结束-->
</div>
<!--图片上传框体结束-->
<!--图片上传检查、选择、创建相册JS-->
<script type="text/javascript">
var check = false; //事件检查
no_insert = 1; //没有可选择的相册，传到默认相册
function a_addOption() { //附加选项
var obj = $('uploadalbum'); //上传相册
obj.value = 'addoption'; //输出附加选项
addOption(obj);
}
function album_op(id) { //打开相册选择框
$('selectalbum').style.display = 'none'; //选择相册
$('creatalbum').style.display = 'none'; //创建新相册
$(id).style.display = ''; //显示样式，这里留空为默认样式
check = false; //关闭菜单
if(id == 'creatalbum') { //当选择创建按钮时显示创建相册的选项
check = true; //开启菜单
$('albumname').select(); //输入新相册名称
}
}
</script>
<!--图片上传检查、选择、创建相册JS结束-->
<!--上传图片与创建相册分页分割线-->
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3);margin-left:2px;" width="100%" color=#987cb9 SIZE=1>
<!--上传图片与创建相册分页分割线结束-->
<!--上传图片并创建相册的框体-->
<!--选择或创建相册的框体-->
<div class="kuang">
<h2>2. 选择图片的保存位置</h2>
<div style="border-radius:5px;">
<!--判断是否点击选择时显示的菜单和选项-->
<!--{if $albums}-->
<center>
<p>
<!--默认选定上传到相册，显示相册列表-->
<label for="albumop_selectalbum">
<input type="radio" name="albumop" id="albumop_selectalbum" value="selectalbum" checked="checked" onclick="album_op(this.value);" />
上传到相册
</label>
<!--当点击创建相册触发显示创建相册-->
<label for="albumop_creatalbum">
<input type="radio" name="albumop" id="albumop_creatalbum" value="creatalbum" onclick="album_op(this.value);" />
创建新相册
</label>
</p>
<!--选择相册-->
<div id="selectalbum" class="font">
<table>
<tr>
<th id="th">请选择相册</th>
<td class="td_box3">
<!--相册选择表单-->
<select name="albumid" id="uploadalbumid">
<!--从后端获取相册列表-->
<!--{loop $albums $value}-->
<!--{if $value['albumid'] == $_GET['albumid']}-->
<!--如果没有点击，默认选择获取到的最后一次创建的相册-->
<option value="$value[albumid]" selected="selected">$value[albumname]</option>
<!--{else}-->
<!--反之，点击弹出倒叙排列候选框-->
<option value="$value[albumid]">$value[albumname]</option>
<!--{/if}-->
<!--{/loop}-->
<!--获取相册列表结束-->
</select>
</td>
</tr>
</table>
</div>
<!--相册选择结束-->
</center>
<!--默认不显示创建相册的选项-->
<div id="creatalbum" style="display:none;">
<!--{else}-->
<!--反之，点击就显示创建相册的选项-->
<input type="hidden" name="albumop" value="creatalbum" />
<!--{/if}-->
<!--判断是否点击选择显示菜单和选项结束-->
<!--默认隐藏部分-->
<table>
<tr>
<th id="th">相册名称</th>
<td class="td_box"><input type="text" name="albumname" id="albumname" class="td" size="20" value="" /></td>
</tr>
<tr>
<th></th>
<td></td>
</tr>
<tr>
<th id="th">相册描述</th>
<td class="td_box">
<input name="depict" class="td2" cols="40" rows="2" /></td>
</tr>
<!--{if $_G['setting']['albumcategorystat'] && $categoryselect}-->
<tr>
<th id="th">社区分类</th>
<td class="td_box2" > $categoryselect</td>
</tr>
<!--{/if}-->
<tr>
<th id="th">隐私设置</th>
<td class="td_box2"> <select name="friend" id="uploadfriend" onchange="passwordShow(this.value);">
<option value="0">公开相册</option>
<option value="1">好友可见</option>
<option value="2">指定可见</option>
<option value="3">私密相册</option>
<option value="4">密码访问</option>
</select>
</td>
</tr>
<!--二段隐藏选项部分-->
<tbody id="span_password" style="display:none;">
<tr >
<th id="th">访问密码</th>
<td class="td_box2"><input class="td" type="text" name="password" id="uploadpassword" value="请设置相册访问密码" onfocus="javascript:if(this.value=='请设置相册访问密码')this.value='';" size="10" /></td>
</tr>
</tbody>
<tbody id="tb_selectgroup" style="display:none;">
<tr>
<th id="th">指定好友</th>
<td class="td_box2">
<select class="td3" name="selectgroup" onchange="getgroup(this.value);">
<option value="">从好友列表中选择</option>
<!--{loop $groups $key $value}-->
<option value="$key">$value</option>
<!--{/loop}-->
</select>
</td>
</tr>
<tr>
<th id="th">好友昵称</th>
<td class="td_box2">
<input name="target_names" class="td4" id="target_names" rows="3" value="好友昵称使用空格键分隔" onfocus="javascript:if(this.value=='好友昵称使用空格键分隔')this.value='';" />
</td>
</tr>
</tbody>
<!--二段隐藏选项部分结束-->
</table>
</div>
</div>
<!--默认隐藏部分结束-->
<div>
<center>
<h2> <span class="span">温馨提示：社区分类会将作品在搜索结果中展现。</span></h2>
<input type="hidden" name="albumsubmit" id="albumsubmit" value="true" />
<button type="submit" name="albumsubmit_btn" id="albumsubmit_btn btn" value="true"{if $_G['setting']['albumcategoryrequired']} onclick="return validate(this);"{/if}><strong>提交上传</strong><text></text></button>
<input type="hidden" name="formhash" value="{FORMHASH}" />
</center>
</div>
</div>
</form>
<!--图片上传-从本地选择、验证文件-->
<script type="text/javascript">
<!--{if empty($albums)}-->
if(typeof $('albumname') == 'object') {
$('albumname').select();
}
<!--{/if}-->
function validate(obj) { //上传验证
if(!$('attachbody').getElementsByTagName('tr').length) { //附件标签、名称、描述、长度
showDialog('{lang select_upload_pic}', 'notice', '{lang reminder}', null, 0);//选择上传图片
return false;
}
<!--{if $_G['setting']['albumcategorystat'] && $_G['setting']['albumcategoryrequired']}--> //需要上传的相册分类
var catObj = $("catid");
if(catObj && check) { //检查
if (catObj.value < 1) {
showDialog('{lang select_system_cat}', 'notice', '{lang reminder}', null, 0); //选择系统相册、提示信息
catObj.focus();
return false;
}
}
<!--{/if}-->
return true;
}
</script>
<!--{elseif $_GET['op'] == 'cam'}-->
<!--图片上传-从本地选择、验证结束-->
</div>
<div>
<!--判断非图片文件-->
<script type="text/javascript">
document.write(AC_FL_RunContent(
'width', '100%', 'height', '415',
'src', '{IMGDIR}/cam.swf?config=$config&albumid=$_GET[albumid]',
'quality', 'high', 'wmode', 'transparent'
));
</script>
<!--{/if}-->
<!--文件类型判断结束-->
</div>
<!--页面完整代码结束-->
1833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
