226 lines
7.5 KiB
HTML
226 lines
7.5 KiB
HTML
|
<html lang="zh-cn">
|
|||
|
|
<head>
|
|||
|
|
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
|
|||
|
|
<title>文件管理</title>
|
|||
|
|
<link rel="stylesheet" type="text/css" href="/public/plugins/webuploader/webuploader.css">
|
|||
|
|
<link rel="stylesheet" type="text/css" href="/public/plugins/webuploader/css/style.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<div class="upload-box">
|
|||
|
|
<input type="hidden" name="fileurl_tmp">
|
|||
|
|
<ul class="tabs">
|
|||
|
|
<li class="checked" id="upload_tab">本地上传</li>
|
|||
|
|
<!--<li id="manage_tab">在线管理</li>-->
|
|||
|
|
<!--<li id="search_tab">文件搜索</li>-->
|
|||
|
|
</ul>
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="area upload-area area-checked" id="upload_area">
|
|||
|
|
<div id="uploader">
|
|||
|
|
<div class="statusBar" style="display:none;">
|
|||
|
|
<div class="progress">
|
|||
|
|
<span class="text">0%</span>
|
|||
|
|
<span class="percentage"></span>
|
|||
|
|
</div><div class="info"></div>
|
|||
|
|
<div class="btns">
|
|||
|
|
<div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
|
|||
|
|
<div class="saveBtn">确定使用</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="queueList">
|
|||
|
|
<div id="dndArea" class="placeholder">
|
|||
|
|
<div id="filePicker"></div>
|
|||
|
|
<p>或将文件拖到这里，本次最多可选{$info.num|default=1}个</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="area manage-area" id="manage_area">
|
|||
|
|
<ul class="choose-btns">
|
|||
|
|
<li class="btn sure checked">确定</li>
|
|||
|
|
<li class="btn cancel">取消</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="file-list">
|
|||
|
|
<ul id="file_all_list">
|
|||
|
|
<!--<li class="checked">
|
|||
|
|
<div class="img">
|
|||
|
|
<img src="" />
|
|||
|
|
<span class="icon"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="desc"></div>
|
|||
|
|
</li>-->
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="area search-area" id="search_area">
|
|||
|
|
<ul class="choose-btns">
|
|||
|
|
<li class="search">
|
|||
|
|
<div class="search-condition">
|
|||
|
|
<input class="key" type="text" />
|
|||
|
|
<input class="submit" type="button" hidefocus="true" value="搜索" />
|
|||
|
|
</div>
|
|||
|
|
</li>
|
|||
|
|
<li class="btn sure checked">确定</li>
|
|||
|
|
<li class="btn cancel">取消</li>
|
|||
|
|
</ul>
|
|||
|
|
<div class="file-list">
|
|||
|
|
<ul id="file_search_list">
|
|||
|
|
<!--<li>
|
|||
|
|
<div class="img">
|
|||
|
|
<img src="" />
|
|||
|
|
<span class="icon"></span>
|
|||
|
|
</div>
|
|||
|
|
<div class="desc"></div>
|
|||
|
|
</li>-->
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="fileWarp" style="display:none;">
|
|||
|
|
<fieldset>
|
|||
|
|
<legend>列表</legend>
|
|||
|
|
<ul>
|
|||
|
|
</ul>
|
|||
|
|
</fieldset>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script type="text/javascript" src="/public/js/jquery-1.10.2.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="/public/plugins/webuploader/webuploader.min.js"></script>
|
|||
|
|
<script type="text/javascript" src="/public/plugins/webuploader/upload.js"></script>
|
|||
|
|
<script>
|
|||
|
|
var img_data = null;
|
|||
|
|
var that = WebUploader.create({
|
|||
|
|
"swf":"/public/plugins/webuploader/Uploader.swf",
|
|||
|
|
"server":"{$info.upload}",
|
|||
|
|
"filelistPah":"{$info.fileList}",
|
|||
|
|
"delPath":"{:U('Uploadify/delupload')}",
|
|||
|
|
"chunked":false,
|
|||
|
|
"chunkSize":1024000,
|
|||
|
|
"fileNumLimit":{$info.num|default=1},
|
|||
|
|
"fileSizeLimit":2097152000,
|
|||
|
|
"fileSingleSizeLimit":20971520,
|
|||
|
|
"fileVal":"file",
|
|||
|
|
"auto":true,
|
|||
|
|
"formData":{},
|
|||
|
|
"pick":{"id":"#filePicker","label":"点击选择文件","name":"file"},
|
|||
|
|
"thumb":{"width":110,"height":110,"quality":70,"allowMagnify":true,"crop":true,"preserveHeaders":false,"type":"image\/jpeg"},
|
|||
|
|
"compress":false,
|
|||
|
|
type : 'Images'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
that.on('uploadProgress', function (file, percentage) {
|
|||
|
|
var $li = $('.statusBar')
|
|||
|
|
$li.show();
|
|||
|
|
$('.uploadBtn').hide();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
that.on('fileQueued', function (file) {
|
|||
|
|
var $list = $('.filelist');
|
|||
|
|
// $list为容器jQuery实例
|
|||
|
|
$list.append("<li id='"+ file.id +"' class='state-complete upload-state-done'><img id='poster-img'><span class='success'></span></li>");
|
|||
|
|
|
|||
|
|
// 创建缩略图
|
|||
|
|
// 如果为非图片文件，可以不用调用此方法。
|
|||
|
|
// thumbnailWidth x thumbnailHeight 为 100 x 100
|
|||
|
|
that.makeThumb(file, function (error, src) {
|
|||
|
|
img_data = file._info;
|
|||
|
|
if (error) {
|
|||
|
|
$('#poster-img').replaceWith('<span>不能预览</span>');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
$('#poster-img').attr('src', src);
|
|||
|
|
}, 100, 100);
|
|||
|
|
$('#dndArea').hide();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
that.on('uploadSuccess',function(file,respone){
|
|||
|
|
$("input[name='fileurl_tmp']").val(respone.url)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
/*点击保存按钮时
|
|||
|
|
// *判断允许上传数，检测是单一文件上传还是组文件上传
|
|||
|
|
// *如果是单一文件，上传结束后将地址存入$input元素
|
|||
|
|
// *如果是组文件上传，则创建input样式，添加到$input后面
|
|||
|
|
// *隐藏父框架，清空列队，移除已上传文件样式*/
|
|||
|
|
$(".statusBar .saveBtn").click(function(){
|
|||
|
|
var callback = "{$info.func}";
|
|||
|
|
var elementid = "{$info.input}";
|
|||
|
|
var num = {$info.num|default=1};
|
|||
|
|
var fileurl_tmp = '';
|
|||
|
|
if(callback != "undefined"){
|
|||
|
|
fileurl_tmp = $("input[name^='fileurl_tmp']").val();
|
|||
|
|
eval('window.parent.'+callback+'(fileurl_tmp,elementid,img_data)');
|
|||
|
|
window.parent.layer.closeAll();
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
$(window.parent.document).find("#{$info.input}").val($("input[name^='fileurl_tmp']").val());
|
|||
|
|
window.parent.layer.closeAll();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
$(function(){
|
|||
|
|
// moudle = 'Admin';
|
|||
|
|
// var config = {
|
|||
|
|
// "swf":"/public/plugins/webuploader/Uploader.swf",
|
|||
|
|
// "server":"{$info.upload}",
|
|||
|
|
// "filelistPah":"{$info.fileList}",
|
|||
|
|
// "delPath":"{:U('Uploadify/delupload')}",
|
|||
|
|
// "chunked":false,
|
|||
|
|
// "chunkSize":1024000,
|
|||
|
|
// "fileNumLimit":{$info.num|default=1},
|
|||
|
|
// "fileSizeLimit":2097152000,
|
|||
|
|
// "fileSingleSizeLimit":20971520,
|
|||
|
|
// "fileVal":"file",
|
|||
|
|
// "auto":true,
|
|||
|
|
// "formData":{},
|
|||
|
|
// "pick":{"id":"#filePicker","label":"点击选择文件","name":"file"},
|
|||
|
|
// "thumb":{"width":110,"height":110,"quality":70,"allowMagnify":true,"crop":true,"preserveHeaders":false,"type":"image\/jpeg"},
|
|||
|
|
// "compress":false
|
|||
|
|
// };
|
|||
|
|
// var fileType = "{$info.fileType|default='Images'}";
|
|||
|
|
// Manager.upload($.extend(config, {type : fileType}));
|
|||
|
|
//
|
|||
|
|
// /*点击保存按钮时
|
|||
|
|
// *判断允许上传数，检测是单一文件上传还是组文件上传
|
|||
|
|
// *如果是单一文件，上传结束后将地址存入$input元素
|
|||
|
|
// *如果是组文件上传，则创建input样式，添加到$input后面
|
|||
|
|
// *隐藏父框架，清空列队，移除已上传文件样式*/
|
|||
|
|
// $(".statusBar .saveBtn").click(function(){
|
|||
|
|
// var callback = "{$info.func}";
|
|||
|
|
// var elementid = "{$info.input}";
|
|||
|
|
// var num = {$info.num|default=1};
|
|||
|
|
// var fileurl_tmp = [];
|
|||
|
|
// if(callback != "undefined"){
|
|||
|
|
// if(num > 1){
|
|||
|
|
// $("input[name^='fileurl_tmp']").each(function(index,dom){
|
|||
|
|
// fileurl_tmp[index] = dom.value;
|
|||
|
|
// });
|
|||
|
|
// }else{
|
|||
|
|
// fileurl_tmp = $("input[name^='fileurl_tmp']").val();
|
|||
|
|
// }
|
|||
|
|
// eval('window.parent.'+callback+'(fileurl_tmp,elementid)');
|
|||
|
|
// window.parent.layer.closeAll();
|
|||
|
|
// return;
|
|||
|
|
// }
|
|||
|
|
// if(num > 1){
|
|||
|
|
// var fileurl_tmp = "";
|
|||
|
|
// $("input[name^='fileurl_tmp']").each(function(){
|
|||
|
|
// fileurl_tmp += '<li rel="'+ this.value +'"><input class="input-text" type="text" name="{$info.input}[]" value="'+ this.value +'" /><a href="javascript:void(0);" onclick="ClearPicArr(\''+ this.value +'\',\'\')">删除</a></li>';
|
|||
|
|
// });
|
|||
|
|
// $(window.parent.document).find("#{$info.input}").append(fileurl_tmp);
|
|||
|
|
// }else{
|
|||
|
|
// $(window.parent.document).find("#{$info.input}").val($("input[name^='fileurl_tmp']").val());
|
|||
|
|
// }
|
|||
|
|
// window.parent.layer.closeAll();
|
|||
|
|
// });
|
|||
|
|
//
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|