更换编辑器
This commit is contained in:
@@ -0,0 +1,630 @@
|
||||
/**
|
||||
* HTML5上传插件
|
||||
* @site https://git.oschina.net/blackfox/ajaxUpload
|
||||
* @author yangjian<yangjian102621@gmail.com>
|
||||
* @version 1.0.1
|
||||
*/
|
||||
(function($) {
|
||||
|
||||
//判断浏览器是否支持html5
|
||||
if ( typeof FormData == "undefined" )
|
||||
throw new Error("您当前的浏览器不支持HTML5,请先升级浏览器才能使用该上传插件!");
|
||||
|
||||
//image crop
|
||||
$.fn.imageCrop = function(__width, __height) {
|
||||
$(this).on("load", function () {
|
||||
|
||||
var width, height, left, top;
|
||||
var orgRate = this.width/this.height;
|
||||
var cropRate = __width/__height;
|
||||
if ( orgRate >= cropRate ) {
|
||||
height = __height;
|
||||
width = __width * orgRate;
|
||||
top = 0;
|
||||
left = (width - __width)/2;
|
||||
} else {
|
||||
width = __width;
|
||||
height = __height / orgRate;
|
||||
left = 0;
|
||||
//top = (height - __height)/2;
|
||||
top = 0;
|
||||
}
|
||||
$(this).css({
|
||||
"position" : "absolute",
|
||||
top : -top + "px",
|
||||
left : -left + "px",
|
||||
width : width + "px",
|
||||
height : height + "px"
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
//make element draggable
|
||||
$.fn.draggable = function(options) {
|
||||
var defaults = {
|
||||
handler : null
|
||||
}
|
||||
options = $.extend(defaults, options);
|
||||
var __self = this;
|
||||
$(options.handler).mousedown(function(e) {
|
||||
var offsetLeft = e.pageX - $(__self).position().left;
|
||||
var offsetTop = e.pageY - $(__self).position().top;
|
||||
$(document).mousemove(function(e) {
|
||||
//清除拖动鼠标的时候选择文本
|
||||
window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();
|
||||
$(__self).css({
|
||||
'top' : e.pageY-offsetTop + 'px',
|
||||
'left' : e.pageX-offsetLeft + 'px'
|
||||
});
|
||||
});
|
||||
|
||||
}).mouseup(function() {
|
||||
$(document).unbind('mousemove');
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
if ( Array.prototype.remove == undefined ) {
|
||||
Array.prototype.remove = function(item) {
|
||||
for ( var i = 0; i < this.length; i++ ) {
|
||||
if ( this[i] == item ) {
|
||||
this.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
if ( Array.prototype.uinque == undefined ) {
|
||||
Array.prototype.uinque = function() {
|
||||
var result = [], hash = {};
|
||||
for ( var i = 0, item; (item = this[i]) != null; i++ ) {
|
||||
if ( !hash[item] ) {
|
||||
result.push(item);
|
||||
hash[item] = true;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
|
||||
window.BUpload = function(options) {
|
||||
|
||||
options = $.extend({
|
||||
src : "src",
|
||||
upload_url : null,
|
||||
list_url : null,
|
||||
data_type : "json",
|
||||
top : 20,
|
||||
fileType : "image", //文件类型，默认是图片，可选flash,media,file
|
||||
max_filesize : 2048, //unit:KB
|
||||
max_filenum : 20,
|
||||
no_data_text : "(⊙o⊙)亲，没有多数据了。",
|
||||
ext_allow : "jpg|png|gif|jpeg",
|
||||
ext_refuse : "exe|txt",
|
||||
extra_params : {},
|
||||
errorHandler : function(messsage, type) {
|
||||
alert(messsage);
|
||||
},
|
||||
callback : function(data) {
|
||||
console.log(data);
|
||||
}
|
||||
}, options);
|
||||
|
||||
//错误代码和提示消息
|
||||
var codeMessageMap = {
|
||||
'000' : '文件上传成功',
|
||||
'001' : '文件上传失败',
|
||||
'003' : '文件大小超出限制',
|
||||
'004' : '非法文件名后缀'
|
||||
};
|
||||
|
||||
var mimeType = {
|
||||
"3gpp":"audio/3gpp, video/3gpp",
|
||||
"ac3":"audio/ac3",
|
||||
"asf":"allpication/vnd.ms-asf",
|
||||
"au":"audio/basic",
|
||||
"css":"text/css",
|
||||
"csv":"text/csv",
|
||||
"doc":"application/msword",
|
||||
"dot":"application/msword",
|
||||
"dtd":"application/xml-dtd",
|
||||
"dwg":"image/vnd.dwg",
|
||||
"dxf":"image/vnd.dxf",
|
||||
"gif":"image/gif",
|
||||
"htm":"text/html",
|
||||
"html":"text/html",
|
||||
"jp2":"image/jp2",
|
||||
"jpe":"image/jpeg",
|
||||
"jpeg":"image/jpeg",
|
||||
"jpg":"image/jpeg",
|
||||
"js":"text/javascript, application/javascript",
|
||||
"json":"application/json",
|
||||
"mp2":"audio/mpeg, video/mpeg",
|
||||
"mp3":"audio/mpeg",
|
||||
"mp4":"audio/mp4, video/mp4",
|
||||
"mpeg":"video/mpeg",
|
||||
"mpg":"video/mpeg",
|
||||
"mpp":"application/vnd.ms-project",
|
||||
"ogg":"application/ogg, audio/ogg",
|
||||
"pdf":"application/pdf",
|
||||
"png":"image/png",
|
||||
"pot":"application/vnd.ms-powerpoint",
|
||||
"pps":"application/vnd.ms-powerpoint",
|
||||
"ppt":"application/vnd.ms-powerpoint",
|
||||
"rtf":"application/rtf, text/rtf",
|
||||
"svf":"image/vnd.svf",
|
||||
"tif":"image/tiff",
|
||||
"tiff":"image/tiff",
|
||||
"txt":"text/plain",
|
||||
"wdb":"application/vnd.ms-works",
|
||||
"wps":"application/vnd.ms-works",
|
||||
"xhtml":"application/xhtml+xml",
|
||||
"xlc":"application/vnd.ms-excel",
|
||||
"xlm":"application/vnd.ms-excel",
|
||||
"xls":"application/vnd.ms-excel",
|
||||
"xlt":"application/vnd.ms-excel",
|
||||
"xlw":"application/vnd.ms-excel",
|
||||
"xml":"text/xml, application/xml",
|
||||
"zip":"aplication/zip",
|
||||
"xlsx":"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
|
||||
}
|
||||
|
||||
var o = {};
|
||||
o.dialog = null;
|
||||
o.todoList = new Array(); //the file queue to be uploaded
|
||||
o.uploadSuccessNum = 0; //已经上传成功的图片数量
|
||||
o.selectedList = new Array(); //the file queue upload successfully
|
||||
o.addedFileNumber = 0; //the numbers of files that has added
|
||||
o.totalFilesize = 0; //total file size
|
||||
o.uploadLock = false; //upload thread lock
|
||||
o.page = 1; //服务器图片列表页码
|
||||
o.marker = null, //七牛云上传的分页标识
|
||||
o.noRecord = false;
|
||||
var dialogSCode = Math.ceil(Math.random() * 1000000000000); //对话框的令牌，如果创建多个BUpload上传对象用来保持唯一性
|
||||
|
||||
//close the dialog
|
||||
o.close = function () {
|
||||
o.dialog.remove();
|
||||
if (typeof options.close == 'function') {
|
||||
options.close();
|
||||
}
|
||||
}
|
||||
|
||||
//create dialog
|
||||
function createDialog() {
|
||||
|
||||
var builder = new StringBuilder();
|
||||
builder.append('<div class="uedbody ke-animated"><div class="ued_title">');
|
||||
builder.append('<div class="uedbar"><span>'+options.lang.title+'</span></div><div class="close_btn icon"' +
|
||||
' title="'+options.lang.closeText+'"></div>');
|
||||
builder.append('</div><div class="wrapper"><div id="wra_head" class="wra_head"><span class="tab' +
|
||||
' tab-upload focus" tab="upload-panel">'+options.lang.localUpload+'</span>');
|
||||
if ( options.list_url != null ) {
|
||||
builder.append('<span class="tab tab-online" tab="online">'+options.lang.fileServer+'</span>');
|
||||
}
|
||||
builder.append('</div><div class="wra_body"><div class="tab-panel upload-panel"><div class="wra_pla"><div class="upload-image-placeholder">');
|
||||
builder.append('<div class="btn btn-primary image-select">'+options.lang.selectFile+'</div><input type="file" name="'+options.src+'" class="webuploader-element-invisible"' +
|
||||
' multiple="multiple" accept="'+getAccept()+'">');
|
||||
builder.append('</div></div><div class="image-list-box" style="display: none;"><div class="wra_bar"><div class="info fl"></div>');
|
||||
builder.append('<div class="fr"><span class="btn btn-default btn-continue-add">'+options.lang.continueAdd+'</span><span class="btn btn-primary btn-start-upload">'+options.lang.startUpload+'</span></div></div>');
|
||||
builder.append('<ul class="filelist"></ul></div></div><div class="tab-panel online"><div class="imagelist"><ul class="list clearfix"></ul><div class="no-data"></div></div></div>');
|
||||
builder.append('<div class="tab-panel searchbox"><div class="search-bar"><input class="searTxt"' +
|
||||
' type="text" placeholder="'+options.lang.searchPlaceholder+'" />');
|
||||
builder.append('<input value="'+options.lang.searchBtn+'" class="btn btn-primary btn-search" type="button" /><input value="'+options.lang.searchClear+'" class="btn btn-default btn-reset" type="button" />');
|
||||
builder.append('</div><div class="search-imagelist-box"><ul class="search-list"></ul><div class="no-data"></div></div>');
|
||||
builder.append('</div><div class="loading-icon"></div></div><!-- end of wrapper --></div><div class="wra-btn-group"><span class="btn btn-primary btn-confirm">'+options.lang.confirmBtnText+'</span>');
|
||||
builder.append('<span class="btn btn-default btn-cancel">'+options.lang.cancelBtnText+'</span></div></div>');
|
||||
|
||||
o.dialog = $(builder.toString());
|
||||
$("body").append(o.dialog);
|
||||
if (options.top == 0) {
|
||||
options.top = ($(window).height() - o.dialog.height())/2;
|
||||
}
|
||||
o.dialog.css({
|
||||
left : ($(window).width() - o.dialog.width())/2 + "px",
|
||||
top : options.top + "px"
|
||||
});
|
||||
//给对话框添加拖拽事件
|
||||
o.dialog.draggable({handler : o.dialog.find(".ued_title")})
|
||||
|
||||
}
|
||||
|
||||
//绑定元素事件
|
||||
function bindEvent() {
|
||||
|
||||
//选项卡事件
|
||||
G(".tab").on("click", function() {
|
||||
var tab = $(this).attr("tab");
|
||||
G(".tab-panel").hide();
|
||||
G("."+tab).show();
|
||||
G(".tab").removeClass("focus");
|
||||
$(this).addClass("focus");
|
||||
});
|
||||
|
||||
//关闭对话框
|
||||
G(".close_btn").on("click", function() {
|
||||
o.close();
|
||||
});
|
||||
|
||||
//选择文件事件
|
||||
G(".webuploader-element-invisible").on("change", function() {
|
||||
addFiles(this);
|
||||
});
|
||||
|
||||
//弹出上传文件选择框
|
||||
G(".image-select").on("click", function() {
|
||||
G(".webuploader-element-invisible").trigger("click");
|
||||
});
|
||||
G(".btn-continue-add").on("click", function() {
|
||||
G(".webuploader-element-invisible").trigger("click");
|
||||
});
|
||||
|
||||
//开始上传按钮事件
|
||||
G(".btn-start-upload").on("click", function() {
|
||||
if ( o.uploadLock ) return;
|
||||
|
||||
if ( o.todoList.length == 0 ) {
|
||||
options.errorHandler(options.lang.noFileAdded, "error");
|
||||
return false;
|
||||
}
|
||||
$(this).addClass("disabled").text(options.lang.uploading);
|
||||
uploadFile(o.todoList.shift());
|
||||
});
|
||||
|
||||
//点击确认|取消按钮事件
|
||||
G(".btn-confirm").on("click", function() {
|
||||
if ( o.todoList.length > 0 ) {
|
||||
options.errorHandler(options.lang.fileNotUpload, "error");
|
||||
return false;
|
||||
}
|
||||
if (o.selectedList.length == 0) {
|
||||
options.errorHandler(options.lang.noFileSelected, "error");
|
||||
return false;
|
||||
}
|
||||
options.callback(o.selectedList);
|
||||
o.close();
|
||||
|
||||
});
|
||||
G(".btn-cancel").on("click", function() {
|
||||
o.close();
|
||||
});
|
||||
|
||||
//从服务器加载文件
|
||||
G(".tab-online").on("click", function() {
|
||||
|
||||
if ( G(".imagelist .list").children().length == 0 ) {
|
||||
loadFilesFromServer()
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
//当滚动条滚到底部时自动去加载图片
|
||||
G(".imagelist").on("scroll", function() {
|
||||
|
||||
if ( this.scrollTop + this.clientHeight >= this.scrollHeight ) {
|
||||
loadFilesFromServer();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
//add file to upload list
|
||||
function addFiles(input) {
|
||||
|
||||
var files = input.files;
|
||||
var totalFileNum = o.todoList.length + o.uploadSuccessNum + files.length; //本次上传文件总数
|
||||
for ( var i = o.addedFileNumber; i < o.addedFileNumber+files.length; i++ ) {
|
||||
|
||||
if ( totalFileNum > options.max_filenum ) {
|
||||
options.errorHandler(KindEditor.tmpl(options.lang.uploadLimit, {uploadLimit: options.max_filenum}), "error");
|
||||
return;
|
||||
}
|
||||
var builder = new StringBuilder();
|
||||
var tempFile = files[i- o.addedFileNumber];
|
||||
builder.append('<li id="img-comtainer-'+dialogSCode+i+'"><div class="imgWrap">');
|
||||
|
||||
//如果上传的不是图片，则通过判断文件后缀来显示不同的图标
|
||||
var extension = getFileExt(tempFile.name);
|
||||
if ( extension == '' ) extension = "default";
|
||||
extension = extension.toLowerCase();
|
||||
if ( "jpg|jpeg|gif|png|bmp".indexOf(extension) == -1 ) {
|
||||
builder.append('<span class="icon-placeholder icon-default icon-'+extension+'"></span>');
|
||||
} else {
|
||||
builder.append('<img src="'+window.URL.createObjectURL(tempFile)+'" border="0" />');
|
||||
}
|
||||
|
||||
builder.append('</div><div class="file-opt-box clearfix"><span class="remove" index="'+i+'">'+options.lang.remove+'</span><span class="rotateRight">'+options.lang.rotateRight+'</span>');
|
||||
builder.append('<span class="rotateLeft">'+options.lang.rotateLeft+'</span></div><div class="success"></div><div class="error"></div>');
|
||||
builder.append('<div class="progress"><span style="display: none; width: 0px;"></span></div></li>');
|
||||
|
||||
var $image = $(builder.toString());
|
||||
//bind onelele event
|
||||
$image.find(".remove").on("click", function() {
|
||||
$(this).parents("li").remove(); //remove element
|
||||
//remove file from todoList
|
||||
var index = $(this).attr("index");
|
||||
for ( var i = 0; i < o.todoList.length; i++ ) {
|
||||
if ( o.todoList[i].index == index ) {
|
||||
o.totalFilesize -= o.todoList[i].file.size;
|
||||
updateInfoText(o.uploadSuccessNum + o.todoList.length-1, o.totalFilesize);
|
||||
o.todoList.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (G(".filelist li").length == 0) {
|
||||
G(".image-list-box").hide();
|
||||
G(".wra_pla").show();
|
||||
}
|
||||
});
|
||||
$image.on("mouseover", function() {
|
||||
$(this).find(".file-opt-box").show();
|
||||
}).on("mouseout", function() {
|
||||
$(this).find(".file-opt-box").hide();
|
||||
});
|
||||
|
||||
G(".wra_pla").hide();
|
||||
G(".image-list-box").show();
|
||||
G(".filelist").append($image);
|
||||
|
||||
o.todoList.push({index:i, file:tempFile});
|
||||
o.totalFilesize += tempFile.size;
|
||||
|
||||
//console.log(tempFile);
|
||||
}
|
||||
o.addedFileNumber += files.length;
|
||||
updateInfoText(o.uploadSuccessNum + o.todoList.length, o.totalFilesize);
|
||||
|
||||
//缩放并裁剪图片
|
||||
$(".imgWrap img").imageCrop(113,113);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* upload file function(文件上传主函数)
|
||||
* @param node 数据节点
|
||||
*/
|
||||
function uploadFile(node) {
|
||||
|
||||
if ( !fileCheckHandler(node) ) {
|
||||
uploadNextFile(); //skip the file and upload the next file
|
||||
return;
|
||||
}
|
||||
|
||||
// prepare XMLHttpRequest
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', options.upload_url);
|
||||
//upload successfully
|
||||
xhr.addEventListener('load',function(e) {
|
||||
|
||||
if ( options.data_type == "json" ) {
|
||||
//console.log(e);
|
||||
var data = $.parseJSON(e.target.responseText);
|
||||
if ( data.code == "000" ) {
|
||||
o.selectedList.push(data.data.url); //添加文件到上传文件列表
|
||||
o.uploadSuccessNum++;
|
||||
$("#img-comtainer-"+dialogSCode+ node.index).find(".file-opt-box").remove();
|
||||
$("#img-comtainer-"+dialogSCode+ node.index).find(".progress").remove();
|
||||
$("#img-comtainer-"+dialogSCode+ node.index).find(".success").show();
|
||||
} else {
|
||||
__error__(codeMessageMap[data.code], node);
|
||||
}
|
||||
}
|
||||
|
||||
}, false);
|
||||
|
||||
// file upload complete
|
||||
xhr.addEventListener('loadend', function () {
|
||||
uploadNextFile(); //upload the next file
|
||||
}, false);
|
||||
|
||||
//上传失败
|
||||
xhr.addEventListener('error', function() {
|
||||
__error__(options.lang.uploadFail, node);
|
||||
}, false);
|
||||
|
||||
xhr.upload.addEventListener('progress', function(e) {
|
||||
updateProgress(e, node);
|
||||
}, false);
|
||||
|
||||
// prepare FormData
|
||||
var formData = new FormData();
|
||||
formData.append(options.src, node.file);
|
||||
// add extra params
|
||||
for(var k in options.extra_params) {
|
||||
formData.append(k, options.extra_params[k]);
|
||||
}
|
||||
xhr.send(formData);
|
||||
|
||||
}
|
||||
|
||||
//upload next file(上传下一个文件)
|
||||
function uploadNextFile() {
|
||||
|
||||
if ( o.todoList.length ) {
|
||||
var nextFile = o.todoList.shift();
|
||||
uploadFile(nextFile);
|
||||
} else {
|
||||
o.uploadLock = false; //release the upload lock
|
||||
G(".btn-start-upload").removeClass("disabled").text(options.lang.startUpload);
|
||||
//console.log(o.selectedList);
|
||||
}
|
||||
}
|
||||
|
||||
// progress handler(文件上传进度控制)
|
||||
function updateProgress(e, node) {
|
||||
if ( e.lengthComputable ) {
|
||||
$("#img-comtainer-"+dialogSCode+ node.index).find(".progress span").css({"width" : (e.loaded/e.total)*100+'%', "display":"block"});
|
||||
}
|
||||
}
|
||||
|
||||
//update file info text
|
||||
function updateInfoText(filenum, filesize) {
|
||||
var text = KindEditor.tmpl(options.lang.uploadDesc, {numSelect:filenum, totalSize:formatFileSize(filesize), numLeft:(options.max_filenum - filenum)});
|
||||
G(".info").text(text);
|
||||
}
|
||||
|
||||
//format file size(格式化文件大小)
|
||||
function formatFileSize(size) {
|
||||
|
||||
if ( size/1048576 > 1 ) {
|
||||
return (size/1048576).toFixed(2)+"MB";
|
||||
} else {
|
||||
return (size/1024).toFixed(2)+"KB";
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//file check handler(文件检测处理函数)
|
||||
function fileCheckHandler(node) {
|
||||
|
||||
//检查文件大小
|
||||
var maxsize = options.max_filesize * 1024;
|
||||
if ( maxsize > 0 && node.file.size > maxsize ) {
|
||||
__error__(KindEditor.tmpl(options.lang.sizeLimit, {sizeLimit:options.max_filesize}), node);
|
||||
return false;
|
||||
}
|
||||
|
||||
//检查文件后缀名
|
||||
var ext = getFileExt(node.file.name);
|
||||
if ( ext && options.ext_allow.indexOf(ext) != -1
|
||||
&& options.ext_refuse.indexOf(ext) == -1 ) {
|
||||
return true;
|
||||
} else {
|
||||
__error__(KindEditor.tmpl(options.lang.invalidExt, {invalidExt:ext}), node);
|
||||
return false;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//获取文件后缀名
|
||||
function getFileExt(filename) {
|
||||
if ( !filename ) return false;
|
||||
var position = filename.lastIndexOf('.')
|
||||
if ( position != -1 ) {
|
||||
return filename.substr(position+1).toLowerCase();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
//获取可接受的文件后缀
|
||||
function getAccept() {
|
||||
var extensions = options.ext_allow.split("|");
|
||||
var accept = [];
|
||||
$.each(extensions, function(idx, item) {
|
||||
accept.push(mimeType[item]);
|
||||
});
|
||||
if ( accept.length > 1 ) {
|
||||
return accept.uinque().join(",");
|
||||
}
|
||||
return "*";
|
||||
}
|
||||
|
||||
//显示上传错误信息
|
||||
function __error__(message, node) {
|
||||
G("#img-comtainer-"+dialogSCode+ node.index).find(".error").show().text(message);
|
||||
}
|
||||
|
||||
//query
|
||||
function G(query) {
|
||||
return o.dialog.find(query);
|
||||
}
|
||||
|
||||
//从服务器上获取图片地址
|
||||
function loadFilesFromServer() {
|
||||
if ( !options.list_url ) {
|
||||
G(".online .no-data").html('<span class="error">'+options.lang.noListUrl+'</span>').show();
|
||||
return false;
|
||||
}
|
||||
if ( o.noRecord ) return false;
|
||||
|
||||
G(".loading-icon").show(); //显示加载图标
|
||||
$.get(options.list_url, {
|
||||
page : o.page,
|
||||
marker : o.marker,
|
||||
fileType : options.fileType,
|
||||
}, function(res) {
|
||||
|
||||
G(".loading-icon").hide(); //隐藏加载图标
|
||||
if ( res.code == "000" ) {
|
||||
|
||||
if (!res.data[0]) { //没有加载到数据
|
||||
G(".online .no-data").text(options.lang.noDataText).show();
|
||||
return;
|
||||
}
|
||||
o.marker = res.extra; //存储marker
|
||||
o.page++;
|
||||
appendFiles(res.data, "online");
|
||||
} else {
|
||||
G(".online .no-data").text(options.lang.noDataText).show();
|
||||
o.noRecord = true;
|
||||
}
|
||||
|
||||
}, "json");
|
||||
}
|
||||
|
||||
//追加元素到图片列表
|
||||
function appendFiles(data, module) {
|
||||
|
||||
$.each(data, function(idx, item) {
|
||||
|
||||
var builder = new StringBuilder();
|
||||
builder.append('<li>');
|
||||
var extension = getFileExt(item.thumbURL);
|
||||
if ( extension == '' ) extension = "default";
|
||||
extension = extension.toLowerCase();
|
||||
//如果不是图片，则根据文件的后缀名去加载对应的缩略图
|
||||
var imgSize = item.width+'x'+item.height; //图片尺寸
|
||||
if ( "jpg|jpeg|gif|png|bmp".indexOf(extension) == -1 ) {
|
||||
imgSize = formatFileSize(item.filesize); //如果是文件则显示文件大小
|
||||
builder.append('<span class="icon-placeholder icon-'+extension+'" data-src="'+item.oriURL+'"></span>');
|
||||
} else {
|
||||
builder.append('<img src="'+item.thumbURL+'" data-src="'+item.oriURL+'" border="0">');
|
||||
}
|
||||
|
||||
builder.append('<span class="ic" data-module="'+module+'"><em class="img-size">'+imgSize+'</em></span></li>');
|
||||
var $image = $(builder.toString());
|
||||
|
||||
//绑定选择图片事件
|
||||
$image.find(".ic").on("click", function() {
|
||||
var src = $(this).prev().data("src");
|
||||
var module = $(this).data("module");
|
||||
if ( $(this).hasClass("selected") ) {
|
||||
$(this).removeClass("selected");
|
||||
} else {
|
||||
$(this).addClass("selected");
|
||||
o.selectedList.push(src);
|
||||
}
|
||||
//console.log(o.selectedList);
|
||||
});
|
||||
//裁剪显示图片
|
||||
$image.find("img").imageCrop(113, 113);
|
||||
if ( module == "online" ) {
|
||||
G(".imagelist .list").append($image);
|
||||
} else if ( module == "search" ) {
|
||||
G(".search-imagelist-box .search-list").append($image);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
//initialize dialog
|
||||
createDialog();
|
||||
bindEvent();
|
||||
return o;
|
||||
}; //end of JUpload
|
||||
|
||||
//string builder
|
||||
var StringBuilder = function() {
|
||||
|
||||
var buffer = new Array();
|
||||
StringBuilder.prototype.append = function(str) {
|
||||
buffer.push(str);
|
||||
}
|
||||
|
||||
StringBuilder.prototype.toString = function () {
|
||||
return buffer.join("");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
})(jQuery);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 162 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 112 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 147 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 175 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 168 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 938 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
@@ -0,0 +1,552 @@
|
||||
@charset "UTF-8";
|
||||
.uedbody {
|
||||
box-sizing: content-box !important;
|
||||
-webkit-box-sizing: content-box !important;
|
||||
-moz-box-sizing: content-box !important;
|
||||
width: 652px;
|
||||
position: fixed;
|
||||
padding: 2px 0px 0px 2px;
|
||||
background-color: #FFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
|
||||
z-index: 811213;
|
||||
font-family: "微软雅黑";
|
||||
font-size: 12px;
|
||||
margin: 0px auto; }
|
||||
.uedbody div, .uedbody dl, .uedbody dt, .uedbody dd, .uedbody ul, .uedbody li, .uedbody ol, .uedbody h1, .uedbody h2, .uedbody h3, .uedbody h4, .uedbody h5, .uedbody h6, .uedbody pre, .uedbody code, .uedbody form, .uedbody fieldset, .uedbody legend, .uedbody button, .uedbody textarea, .uedbody blockquote, .uedbody p {
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
.uedbody h1, .uedbody h2, .uedbody h3, .uedbody h4, .uedbody h5, .uedbody h6 {
|
||||
font-weight: normal; }
|
||||
.uedbody li {
|
||||
list-style-type: none; }
|
||||
.uedbody ol, .uedbody ul, .uedbody dl {
|
||||
list-style: none; }
|
||||
.uedbody em {
|
||||
font-style: normal; }
|
||||
.uedbody img {
|
||||
border: none;
|
||||
vertical-align: middle; }
|
||||
.uedbody select, .uedbody label, .uedbody input {
|
||||
vertical-align: middle;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
outline: medium;
|
||||
font-size: 12px; }
|
||||
.uedbody textarea {
|
||||
resize: none;
|
||||
line-height: 18px; }
|
||||
.uedbody table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
empty-cell: show; }
|
||||
.uedbody a {
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
outline: none;
|
||||
cursor: pointer; }
|
||||
.uedbody a:hover {
|
||||
cursor: pointer;
|
||||
blr: expression(this.onFocus=this.blur()); }
|
||||
.uedbody * {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: content-box !important;
|
||||
-webkit-box-sizing: content-box !important;
|
||||
-moz-box-sizing: content-box !important; }
|
||||
.uedbody .clearfix:before, .uedbody .clearfix:after {
|
||||
content: "";
|
||||
display: table; }
|
||||
.uedbody .clearfix:after {
|
||||
clear: both; }
|
||||
.uedbody .clearfix {
|
||||
*zoom: 1; }
|
||||
.uedbody .fr {
|
||||
float: right; }
|
||||
.uedbody .fl {
|
||||
float: left; }
|
||||
.uedbody .ued_title {
|
||||
height: 26px;
|
||||
border-bottom: 1px solid #C6C6C6;
|
||||
background: transparent url("images/dialog-title-bg.png") repeat-x scroll 0% 0%;
|
||||
position: relative;
|
||||
cursor: move; }
|
||||
.uedbody .ued_title .icon {
|
||||
background: url("images/icons-all.gif") no-repeat center; }
|
||||
.uedbody .ued_title .uedbar span {
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
line-height: 26px;
|
||||
padding-left: 5px; }
|
||||
.uedbody .ued_title .close_btn {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
background-position: 0px -59px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 3px; }
|
||||
.uedbody .ued_title .close_btn:hover {
|
||||
background-position: 0px -89px; }
|
||||
.uedbody .btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 0px;
|
||||
margin-right: 5px;
|
||||
padding: 4px 10px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
font-size: 14px;
|
||||
border-radius: 3px;
|
||||
-moz-user-select: none;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
padding: 5px 14px; }
|
||||
.uedbody .btn-default {
|
||||
border: 1px solid #CFCFCF;
|
||||
color: #565656;
|
||||
background: #ffffff; }
|
||||
.uedbody .btn-default:hover {
|
||||
background: #f0f0f0; }
|
||||
.uedbody .btn-primary {
|
||||
background: #00b7ee;
|
||||
color: #ffffff; }
|
||||
.uedbody .btn-primary:hover {
|
||||
background: #00a2d4; }
|
||||
.uedbody .btn.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65; }
|
||||
.uedbody .btn.disabled:hover {
|
||||
background: #00b7ee; }
|
||||
.uedbody .wrapper {
|
||||
width: 630px;
|
||||
height: 380px;
|
||||
margin: 0px auto;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
font-family: sans-serif; }
|
||||
.uedbody .wrapper .wra_head span {
|
||||
float: left;
|
||||
padding: 0px 5px;
|
||||
margin-right: 3px;
|
||||
height: 30px;
|
||||
border: 1px solid #CCC;
|
||||
background: transparent url("images/dialog-title-bg.png") repeat-x scroll 0% 0%;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
position: relative; }
|
||||
.uedbody .wrapper .wra_head span.focus {
|
||||
height: 31px;
|
||||
border-bottom: medium none;
|
||||
background: #FFF none repeat scroll 0% 0%;
|
||||
position: relative;
|
||||
z-index: 2; }
|
||||
.uedbody .wrapper .wra_body {
|
||||
width: 100%;
|
||||
height: 346px;
|
||||
clear: both;
|
||||
margin: 0px auto;
|
||||
border: 1px solid #CCC;
|
||||
display: block;
|
||||
clip: auto;
|
||||
overflow: hidden;
|
||||
top: -1px;
|
||||
position: relative; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .wra_pla {
|
||||
zoom: 1;
|
||||
overflow: hidden;
|
||||
text-align: center; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .wra_pla .upload-image-placeholder {
|
||||
margin: 10px;
|
||||
border: 2px dashed #e6e6e6;
|
||||
height: 172px;
|
||||
padding-top: 150px;
|
||||
text-align: center;
|
||||
background: url("images/image.png") center 70px no-repeat;
|
||||
position: relative;
|
||||
top: 0; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .wra_pla .upload-image-placeholder .webuploader-element-invisible {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .wra_pla .upload-image-placeholder .image-select {
|
||||
padding: 10px 30px;
|
||||
cursor: pointer; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .wra_bar {
|
||||
border-bottom: 1px solid #DADADA;
|
||||
padding: 8px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
zoom: 1;
|
||||
overflow: hidden; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .wra_bar .info {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-top: 6px; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .wra_bar .fr .btn {
|
||||
padding: 6px 15px; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist {
|
||||
list-style: outside none none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
height: 300px; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist li {
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
margin: 9px 0px 0px 9px;
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
font-size: 12px; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist li .imgWrap {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
transform-origin: 50% 50% 0px;
|
||||
transition: all 200ms ease-out 0s; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist li .file-opt-box {
|
||||
position: absolute;
|
||||
display: none;
|
||||
background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
overflow: hidden; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist li .file-opt-box span {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline;
|
||||
float: right;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
background: url("images/icons.png") no-repeat;
|
||||
margin: 5px 1px 1px;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist li .file-opt-box .remove {
|
||||
background-position: -48px -24px; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist li .file-opt-box .remove:hover {
|
||||
background-position: -48px -0px; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist li .file-opt-box .rotateRight {
|
||||
display: none;
|
||||
background-position: -24px -24px; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist li .file-opt-box .rotateRight:hover {
|
||||
background-position: -24px -0px; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist li .file-opt-box .rotateLeft {
|
||||
display: none;
|
||||
background-position: 0px -24px; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist li .file-opt-box .rotateLeft:hover {
|
||||
background-position: 0px 0px; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist li .success {
|
||||
background: url("images/success.png") no-repeat right;
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
height: 40px;
|
||||
width: 100%; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist li .error {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
display: none;
|
||||
background: rgba(255, 255, 255, 0.7) none repeat scroll 0% 0%;
|
||||
left: 0;
|
||||
padding: 5px 3px;
|
||||
color: #cc0000;
|
||||
border: 1px solid #cccccc;
|
||||
bottom: 0; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist li .progress {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
z-index: 50;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
-webkit-box-shadow: 0 0 0; }
|
||||
.uedbody .wrapper .wra_body .upload-panel .image-list-box .filelist li .progress span {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background: #1483d8 url("images/progress.png") repeat-x;
|
||||
-webit-transition: width 200ms linear;
|
||||
-moz-transition: width 200ms linear;
|
||||
-o-transition: width 200ms linear;
|
||||
-ms-transition: width 200ms linear;
|
||||
transition: width 200ms linear;
|
||||
-webkit-animation: progressmove 2s linear infinite;
|
||||
-moz-animation: progressmove 2s linear infinite;
|
||||
-o-animation: progressmove 2s linear infinite;
|
||||
-ms-animation: progressmove 2s linear infinite;
|
||||
animation: progressmove 2s linear infinite;
|
||||
-webkit-transform: translateZ(0); }
|
||||
.uedbody .wrapper .wra_body .online {
|
||||
width: 100%;
|
||||
height: 336px;
|
||||
padding: 10px 0px 0px;
|
||||
display: none; }
|
||||
.uedbody .wrapper .wra_body .online .imagelist {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative; }
|
||||
.uedbody .wrapper .wra_body .online .imagelist .list li {
|
||||
float: left;
|
||||
display: block;
|
||||
list-style: outside none none;
|
||||
padding: 0px;
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
margin: 0px 0px 9px 9px;
|
||||
background-color: #EEE;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
position: relative; }
|
||||
.uedbody .wrapper .wra_body .online .imagelist .list li img {
|
||||
cursor: pointer; }
|
||||
.uedbody .wrapper .wra_body .online .imagelist .list li span.ic {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: pointer;
|
||||
width: 113px;
|
||||
height: 113px; }
|
||||
.uedbody .wrapper .wra_body .online .imagelist .list li span.ic .img-size {
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: none;
|
||||
color: #ffffff; }
|
||||
.uedbody .wrapper .wra_body .online .imagelist .list li span.ic:hover {
|
||||
width: 107px;
|
||||
height: 107px;
|
||||
border: 3px solid #1094FA;
|
||||
background-position: 72px 72px; }
|
||||
.uedbody .wrapper .wra_body .online .imagelist .list li span.ic:hover .img-size {
|
||||
display: inline-block;
|
||||
width: 97px; }
|
||||
.uedbody .wrapper .wra_body .online .imagelist .list li span.selected {
|
||||
background: url("images/success.png") no-repeat 75px 75px; }
|
||||
.uedbody .wrapper .wra_body .searchbox {
|
||||
width: 100%;
|
||||
padding: 10px 0px 0px;
|
||||
zoom: 1;
|
||||
overflow: hidden;
|
||||
display: none; }
|
||||
.uedbody .wrapper .wra_body .searchbox .search-bar .searTxt {
|
||||
margin-left: 5px;
|
||||
background: #FFF none repeat scroll 0% 0%;
|
||||
width: 300px;
|
||||
height: 21px;
|
||||
line-height: 21px;
|
||||
padding: 3px 6px;
|
||||
font-size: 14px;
|
||||
line-height: 1.42857;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
|
||||
margin-right: 10px; }
|
||||
.uedbody .wrapper .wra_body .searchbox .search-bar .searchBtn {
|
||||
color: #FFF;
|
||||
border-color: #285E8E;
|
||||
background-color: #3B97D7; }
|
||||
.uedbody .wrapper .wra_body .searchbox .search-bar .searchRese {
|
||||
color: #333;
|
||||
border-color: #CCC;
|
||||
background-color: #FFF; }
|
||||
.uedbody .wrapper .wra_body .searchbox .search-imagelist-box {
|
||||
width: 100%;
|
||||
height: 292px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
margin-top: 10px; }
|
||||
.uedbody .wrapper .wra_body .searchbox .search-imagelist-box .search-list {
|
||||
zoom: 1;
|
||||
overflow: hidden; }
|
||||
.uedbody .wrapper .wra_body .searchbox .search-imagelist-box .search-list li {
|
||||
float: left;
|
||||
display: block;
|
||||
list-style: outside none none;
|
||||
padding: 0px;
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
margin: 0px 0px 9px 9px;
|
||||
background-color: #EEE;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
position: relative; }
|
||||
.uedbody .wrapper .wra_body .searchbox .search-imagelist-box .search-list li img {
|
||||
cursor: pointer; }
|
||||
.uedbody .wrapper .wra_body .searchbox .search-imagelist-box .search-list li span.ic {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: pointer;
|
||||
width: 113px;
|
||||
height: 113px; }
|
||||
.uedbody .wrapper .wra_body .searchbox .search-imagelist-box .search-list li span.ic .img-size {
|
||||
font-size: 12px;
|
||||
padding: 5px;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: none;
|
||||
color: #ffffff; }
|
||||
.uedbody .wrapper .wra_body .searchbox .search-imagelist-box .search-list li span.ic:hover {
|
||||
width: 107px;
|
||||
height: 107px;
|
||||
border: 3px solid #1094FA;
|
||||
background-position: 72px 72px;
|
||||
overflow: hidden; }
|
||||
.uedbody .wrapper .wra_body .searchbox .search-imagelist-box .search-list li span.ic:hover .img-size {
|
||||
display: inline-block;
|
||||
width: 97px; }
|
||||
.uedbody .wrapper .wra_body .searchbox .search-imagelist-box .search-list li span.selected {
|
||||
background: url("images/success.png") no-repeat 75px 75px; }
|
||||
.uedbody .wrapper .wra_body .no-data {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
font-size: 14px;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
display: none; }
|
||||
.uedbody .wrapper .wra_body .no-data .error {
|
||||
color: #cc0000; }
|
||||
.uedbody .wrapper .wra_body .loading-icon {
|
||||
background: rgba(0, 0, 0, 0.4) url("images/loader.gif") no-repeat center center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 346px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: none;
|
||||
text-align: center; }
|
||||
.uedbody .wrapper .wra_body .loading-icon .loading-message {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
color: #f0f0f0;
|
||||
top: 210px;
|
||||
left: 253px; }
|
||||
.uedbody .wrapper .wra_body .icon-placeholder {
|
||||
background-size: 113px 113px;
|
||||
display: block;
|
||||
width: 113px;
|
||||
height: 113px; }
|
||||
.uedbody .wrapper .wra_body .icon-aep, .uedbody .wrapper .wra_body .icon-aepx {
|
||||
background-image: url("icons/aep.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-asp {
|
||||
background-image: url("icons/asp.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-avi {
|
||||
background-image: url("icons/avi.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-c, .uedbody .wrapper .wra_body .icon-cpp {
|
||||
background-image: url("icons/c.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-conf {
|
||||
background-image: url("icons/conf.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-css {
|
||||
background-image: url("icons/css.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-htm, .uedbody .wrapper .wra_body .icon-html {
|
||||
background-image: url("icons/htm.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-default {
|
||||
background-image: url("icons/txt.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-doc, .uedbody .wrapper .wra_body .icon-docx {
|
||||
background-image: url("icons/doc.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-eps {
|
||||
background-image: url("icons/eps.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-fla, .uedbody .wrapper .wra_body .icon-swf {
|
||||
background-image: url("icons/fla.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-idn {
|
||||
background-image: url("icons/idn.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-ini {
|
||||
background-image: url("icons/ini.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-java, .uedbody .wrapper .wra_body .icon-jar, .uedbody .wrapper .wra_body .icon-war {
|
||||
background-image: url("icons/java.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-js {
|
||||
background-image: url("icons/js.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-jsf {
|
||||
background-image: url("icons/jsf.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-md, .uedbody .wrapper .wra_body .icon-markdown {
|
||||
background-image: url("icons/markdown.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-mdb {
|
||||
background-image: url("icons/mdb.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-midi {
|
||||
background-image: url("icons/midi.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-mov {
|
||||
background-image: url("icons/mov.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-mp3 {
|
||||
background-image: url("icons/mp3.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-mpeg {
|
||||
background-image: url("icons/mpeg.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-pdf {
|
||||
background-image: url("icons/pdf.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-php {
|
||||
background-image: url("icons/php.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-ppt, .uedbody .wrapper .wra_body .icon-pptx {
|
||||
background-image: url("icons/ppt.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-psd {
|
||||
background-image: url("icons/psd.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-pst {
|
||||
background-image: url("icons/pst.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-pub {
|
||||
background-image: url("icons/pub.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-py {
|
||||
background-image: url("icons/py.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-rb {
|
||||
background-image: url("icons/rb.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-rm, .uedbody .wrapper .wra_body .icon-rmvb {
|
||||
background-image: url("icons/rmvb.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-scss {
|
||||
background-image: url("icons/scss.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-tif {
|
||||
background-image: url("icons/tif.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-txt {
|
||||
background-image: url("icons/txt.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-vsd {
|
||||
background-image: url("icons/vsd.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-wav {
|
||||
background-image: url("icons/wav.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-wma {
|
||||
background-image: url("icons/wma.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-wmv {
|
||||
background-image: url("icons/wmv.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-xls, .uedbody .wrapper .wra_body .icon-xlsx {
|
||||
background-image: url("icons/xls.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-xml {
|
||||
background-image: url("icons/xml.png"); }
|
||||
.uedbody .wrapper .wra_body .icon-zip, .uedbody .wrapper .wra_body .icon-rar, .uedbody .wrapper .wra_body .icon-tgz, .uedbody .wrapper .wra_body .icon-gz, .uedbody .wrapper .wra_body .icon-tar, .uedbody .wrapper .wra_body .icon-7z {
|
||||
background-image: url("icons/zip.png"); }
|
||||
.uedbody .wrapper .wra_body_server {
|
||||
height: 380px; }
|
||||
.uedbody .wrapper .wra_body_server .online {
|
||||
display: block !important;
|
||||
height: 365px; }
|
||||
.uedbody .wra-btn-group {
|
||||
clear: both;
|
||||
zoom: 1;
|
||||
text-align: right;
|
||||
padding: 10px 20px 20px 0px; }
|
||||
.uedbody .wra-btn-group .tip-text {
|
||||
float: left;
|
||||
padding: 5px 10px;
|
||||
color: #999;
|
||||
font-size: 14px; }
|
||||
|
||||
/*# sourceMappingURL=upload.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1,642 @@
|
||||
$dialogWidth:652px;
|
||||
$dialogZindex:811213;
|
||||
$fontsize:14px;
|
||||
.uedbody{
|
||||
div, dl, dt, dd, ul, li,ol, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, button, textarea, blockquote,p{margin:0; padding:0;}
|
||||
h1,h2,h3,h4,h5,h6 {font-weight:normal;}
|
||||
li{list-style-type:none;}
|
||||
ol,ul,dl{list-style:none;}
|
||||
em{font-style:normal;}
|
||||
img{border:none;vertical-align:middle;}
|
||||
select,label,input{vertical-align:middle; padding:0; margin:0;outline:medium;font-size:12px;}
|
||||
textarea{resize: none; line-height:18px;}
|
||||
table { border-collapse: collapse; border-spacing: 0; empty-cell:show;}
|
||||
a{text-decoration:none;color:#333;outline:none; cursor:pointer;}
|
||||
a:hover{cursor:pointer;blr:expression(this.onFocus=this.blur());}
|
||||
|
||||
box-sizing : content-box !important;
|
||||
-webkit-box-sizing: content-box !important;
|
||||
-moz-box-sizing: content-box !important;
|
||||
|
||||
* {
|
||||
padding: 0; margin: 0;
|
||||
box-sizing : content-box !important;
|
||||
-webkit-box-sizing: content-box !important;
|
||||
-moz-box-sizing: content-box !important;
|
||||
}
|
||||
|
||||
.clearfix:before, .clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after{
|
||||
clear: both;
|
||||
}
|
||||
.clearfix{
|
||||
*zoom: 1;
|
||||
}
|
||||
.fr{float: right;}
|
||||
.fl{float: left;}
|
||||
|
||||
width: $dialogWidth;
|
||||
position: fixed;
|
||||
padding: 2px 0px 0px 2px;
|
||||
background-color: #FFF;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
|
||||
z-index: $dialogZindex;
|
||||
font-family:"微软雅黑";
|
||||
font-size: 12px;
|
||||
margin: 0px auto;
|
||||
|
||||
//start of ued_title
|
||||
.ued_title{
|
||||
height: 26px;
|
||||
border-bottom: 1px solid #C6C6C6;
|
||||
background: transparent url("images/dialog-title-bg.png") repeat-x scroll 0% 0%;
|
||||
position: relative;
|
||||
cursor: move;
|
||||
|
||||
.icon{background: url("images/icons-all.gif") no-repeat center;}
|
||||
|
||||
.uedbar {
|
||||
span{
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #444;
|
||||
line-height: 26px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.close_btn{
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
background-position :0px -59px;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 3px;
|
||||
|
||||
&:hover{background-position: 0px -89px;}
|
||||
}
|
||||
}
|
||||
//end of ued_title
|
||||
|
||||
//button styles
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin-bottom: 0px;
|
||||
margin-right: 5px;
|
||||
padding: 4px 10px;
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
font-size: $fontsize;
|
||||
border-radius: 3px;
|
||||
-moz-user-select: none;
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
padding: 5px 14px;
|
||||
}
|
||||
.btn-default {
|
||||
border: 1px solid #CFCFCF;
|
||||
color: #565656;
|
||||
background: #ffffff;
|
||||
&:hover {
|
||||
background: #f0f0f0;
|
||||
}
|
||||
}
|
||||
.btn-primary {
|
||||
background:#00b7ee;
|
||||
color: #ffffff;
|
||||
&:hover {
|
||||
background: #00a2d4;
|
||||
}
|
||||
}//button style end
|
||||
.btn.disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: .65;
|
||||
&:hover {
|
||||
background: #00b7ee;
|
||||
}
|
||||
}
|
||||
|
||||
//start of wrapper
|
||||
.wrapper {
|
||||
width: 630px;
|
||||
height: 380px;
|
||||
margin: 0px auto;
|
||||
padding: 10px;
|
||||
position: relative;
|
||||
font-family: sans-serif;
|
||||
|
||||
//start of wra_head
|
||||
.wra_head {
|
||||
span {
|
||||
float: left;
|
||||
padding: 0px 5px;
|
||||
margin-right:3px;
|
||||
height: 30px;
|
||||
border: 1px solid #CCC;
|
||||
background: transparent url("images/dialog-title-bg.png") repeat-x scroll 0% 0%;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
span.focus {
|
||||
height: 31px;
|
||||
border-bottom: medium none;
|
||||
background: #FFF none repeat scroll 0% 0%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}//end of wra_head
|
||||
|
||||
//start of wra_body
|
||||
.wra_body{
|
||||
|
||||
width: 100%;
|
||||
height: 346px;
|
||||
clear: both;
|
||||
margin: 0px auto;
|
||||
border: 1px solid #CCC;
|
||||
display: block;
|
||||
clip: auto;
|
||||
overflow: hidden;
|
||||
top: -1px;
|
||||
position: relative;
|
||||
|
||||
//upload panel start
|
||||
.upload-panel {
|
||||
.wra_pla {
|
||||
zoom: 1; overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
.upload-image-placeholder {
|
||||
margin: 10px;
|
||||
border: 2px dashed #e6e6e6;
|
||||
height: 172px;
|
||||
padding-top: 150px;
|
||||
text-align: center;
|
||||
background: url("images/image.png") center 70px no-repeat;
|
||||
position: relative;
|
||||
top: 0;
|
||||
|
||||
.webuploader-element-invisible {
|
||||
//width: 145px;
|
||||
//height: 40px;
|
||||
//position: absolute;
|
||||
//left: 225px;
|
||||
opacity: 0;
|
||||
width: 0; height: 0;
|
||||
}
|
||||
|
||||
.image-select {
|
||||
padding: 10px 30px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//image list box start
|
||||
.image-list-box {
|
||||
.wra_bar {
|
||||
border-bottom: 1px solid #DADADA;
|
||||
padding: 8px;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
zoom: 1; overflow: hidden;
|
||||
|
||||
.info{
|
||||
font-size: $fontsize;
|
||||
color: #666;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.fr {
|
||||
.btn {padding: 6px 15px;}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//filelist start
|
||||
.filelist{
|
||||
list-style: outside none none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
height: 300px;
|
||||
|
||||
li {
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
margin: 9px 0px 0px 9px;
|
||||
position: relative;
|
||||
display: block;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
|
||||
.imgWrap{
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
transform-origin: 50% 50% 0px;
|
||||
transition: all 200ms ease-out 0s;
|
||||
|
||||
}
|
||||
|
||||
//file opt box start
|
||||
.file-opt-box{
|
||||
position: absolute;
|
||||
display: none;
|
||||
background: rgba(0, 0, 0, 0.5) none repeat scroll 0% 0%;
|
||||
width: 100%;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline;
|
||||
float: right;
|
||||
text-indent: -9999px;
|
||||
overflow: hidden;
|
||||
background: url("images/icons.png") no-repeat;
|
||||
margin: 5px 1px 1px;
|
||||
cursor: pointer;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.remove{
|
||||
background-position: -48px -24px;
|
||||
&:hover{
|
||||
background-position: -48px -0px;
|
||||
}
|
||||
}
|
||||
.rotateRight{
|
||||
display: none;
|
||||
background-position: -24px -24px;
|
||||
&:hover{
|
||||
background-position: -24px -0px;
|
||||
}
|
||||
}
|
||||
.rotateLeft{
|
||||
display: none;
|
||||
background-position: 0px -24px;
|
||||
&:hover{
|
||||
background-position: 0px 0px;
|
||||
}
|
||||
}
|
||||
}//file opt box end
|
||||
|
||||
.success{
|
||||
background: url("images/success.png") no-repeat right;
|
||||
position: absolute;
|
||||
display: none;
|
||||
left: 0px;
|
||||
bottom: 0px;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
display: none;
|
||||
background: rgba(255, 255, 255, 0.7) none repeat scroll 0% 0%;
|
||||
left: 0;
|
||||
padding:5px 3px;
|
||||
color: #cc0000;
|
||||
border: 1px solid #cccccc;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
height: 8px;
|
||||
overflow: hidden;
|
||||
z-index: 50;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
background: none;
|
||||
-webkit-box-shadow: 0 0 0;
|
||||
|
||||
span {
|
||||
width: 0;
|
||||
height: 100%;
|
||||
background: #1483d8 url("images/progress.png") repeat-x;
|
||||
-webit-transition: width 200ms linear;
|
||||
-moz-transition: width 200ms linear;
|
||||
-o-transition: width 200ms linear;
|
||||
-ms-transition: width 200ms linear;
|
||||
transition: width 200ms linear;
|
||||
-webkit-animation: progressmove 2s linear infinite;
|
||||
-moz-animation: progressmove 2s linear infinite;
|
||||
-o-animation: progressmove 2s linear infinite;
|
||||
-ms-animation: progressmove 2s linear infinite;
|
||||
animation: progressmove 2s linear infinite;
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
}//end li
|
||||
|
||||
}//filelist end
|
||||
|
||||
}//image list box end
|
||||
}//upload panel end
|
||||
|
||||
//image online start
|
||||
.online{
|
||||
width: 100%;
|
||||
height: 336px;
|
||||
padding: 10px 0px 0px;
|
||||
display: none;
|
||||
|
||||
.imagelist {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
|
||||
.list {
|
||||
li {
|
||||
float: left;
|
||||
display: block;
|
||||
list-style: outside none none;
|
||||
padding: 0px;
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
margin: 0px 0px 9px 9px;
|
||||
background-color: #EEE;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
img{cursor: pointer;}
|
||||
|
||||
span.ic {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: pointer;
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
|
||||
.img-size {
|
||||
font-size:12px;
|
||||
padding: 5px;
|
||||
background:rgba(0,0,0,0.6);
|
||||
display: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
width: 107px;
|
||||
height: 107px;
|
||||
border: 3px solid #1094FA;
|
||||
background-position: 72px 72px;
|
||||
.img-size {
|
||||
display: inline-block;
|
||||
width: 97px;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
span.selected {
|
||||
background: url("images/success.png") no-repeat 75px 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} //image online end
|
||||
|
||||
//image search start
|
||||
.searchbox {
|
||||
width: 100%;
|
||||
padding: 10px 0px 0px;
|
||||
zoom: 1; overflow: hidden;
|
||||
display: none;
|
||||
|
||||
//搜索条
|
||||
.search-bar {
|
||||
|
||||
.searTxt{
|
||||
margin-left: 5px;
|
||||
background: #FFF none repeat scroll 0% 0%;
|
||||
width: 300px;
|
||||
height: 21px;
|
||||
line-height: 21px;
|
||||
padding: 3px 6px;
|
||||
font-size: $fontsize;
|
||||
line-height: 1.42857;
|
||||
border: 1px solid #CCC;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
|
||||
margin-right:10px;
|
||||
}
|
||||
|
||||
.searchBtn {
|
||||
color: #FFF;
|
||||
border-color: #285E8E;
|
||||
background-color: #3B97D7;
|
||||
}
|
||||
.searchRese{
|
||||
color: #333;
|
||||
border-color: #CCC;
|
||||
background-color: #FFF;
|
||||
}
|
||||
}
|
||||
|
||||
.search-imagelist-box {
|
||||
width: 100%;
|
||||
height: 292px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
margin-top:10px;
|
||||
|
||||
.search-list {
|
||||
zoom:1; overflow: hidden;
|
||||
li {
|
||||
float: left;
|
||||
display: block;
|
||||
list-style: outside none none;
|
||||
padding: 0px;
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
margin: 0px 0px 9px 9px;
|
||||
background-color: #EEE;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span.ic {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
cursor: pointer;
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
|
||||
.img-size {
|
||||
font-size:12px;
|
||||
padding: 5px;
|
||||
background:rgba(0,0,0,0.6);
|
||||
display: none;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: 107px;
|
||||
height: 107px;
|
||||
border: 3px solid #1094FA;
|
||||
background-position: 72px 72px;
|
||||
overflow: hidden;
|
||||
.img-size {
|
||||
display: inline-block;
|
||||
width: 97px;
|
||||
}
|
||||
}
|
||||
}
|
||||
span.selected {
|
||||
background: url("images/success.png") no-repeat 75px 75px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}//image search start end
|
||||
|
||||
.no-data {
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
font-size:$fontsize;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
display: none;
|
||||
.error {
|
||||
color: #cc0000;
|
||||
}
|
||||
}
|
||||
|
||||
.loading-icon {
|
||||
background:rgba(0,0,0,0.4) url("images/loader.gif") no-repeat center center;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 346px;
|
||||
top:0; left: 0;
|
||||
display: none;
|
||||
text-align: center;
|
||||
|
||||
.loading-message {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
color: #f0f0f0;
|
||||
top: 210px;
|
||||
left:253px;
|
||||
}
|
||||
}
|
||||
|
||||
//图片占位符
|
||||
.icon-placeholder {
|
||||
background-size: 113px 113px;
|
||||
display: block;
|
||||
width: 113px;
|
||||
height: 113px;
|
||||
}
|
||||
.icon-aep, .icon-aepx {background-image: url("icons/aep.png");}
|
||||
.icon-asp {background-image: url("icons/asp.png");}
|
||||
.icon-avi {background-image: url("icons/avi.png");}
|
||||
.icon-c, .icon-cpp {background-image: url("icons/c.png");}
|
||||
.icon-conf {background-image: url("icons/conf.png");}
|
||||
.icon-css {background-image: url("icons/css.png");}
|
||||
.icon-htm,.icon-html {background-image: url("icons/htm.png");}
|
||||
.icon-default {background-image: url("icons/txt.png");}
|
||||
.icon-doc,.icon-docx {background-image: url("icons/doc.png");}
|
||||
.icon-eps {background-image: url("icons/eps.png");}
|
||||
.icon-fla,.icon-swf {background-image: url("icons/fla.png");}
|
||||
.icon-idn {background-image: url("icons/idn.png");}
|
||||
.icon-ini {background-image: url("icons/ini.png");}
|
||||
.icon-java, .icon-jar, .icon-war {background-image: url("icons/java.png");}
|
||||
.icon-js {background-image: url("icons/js.png");}
|
||||
.icon-jsf {background-image: url("icons/jsf.png");}
|
||||
.icon-md, .icon-markdown {background-image: url("icons/markdown.png");}
|
||||
.icon-mdb {background-image: url("icons/mdb.png");}
|
||||
.icon-midi {background-image: url("icons/midi.png");}
|
||||
.icon-mov {background-image: url("icons/mov.png");}
|
||||
.icon-mp3 {background-image: url("icons/mp3.png");}
|
||||
.icon-mpeg {background-image: url("icons/mpeg.png");}
|
||||
.icon-pdf {background-image: url("icons/pdf.png");}
|
||||
.icon-php {background-image: url("icons/php.png");}
|
||||
.icon-ppt, .icon-pptx {background-image: url("icons/ppt.png");}
|
||||
.icon-psd {background-image: url("icons/psd.png");}
|
||||
.icon-pst {background-image: url("icons/pst.png");}
|
||||
.icon-pub {background-image: url("icons/pub.png");}
|
||||
.icon-py {background-image: url("icons/py.png");}
|
||||
.icon-rb {background-image: url("icons/rb.png");}
|
||||
.icon-rm, .icon-rmvb {background-image: url("icons/rmvb.png");}
|
||||
.icon-scss {background-image: url("icons/scss.png");}
|
||||
.icon-tif {background-image: url("icons/tif.png");}
|
||||
.icon-txt {background-image: url("icons/txt.png");}
|
||||
.icon-vsd {background-image: url("icons/vsd.png");}
|
||||
.icon-wav {background-image: url("icons/wav.png");}
|
||||
.icon-wma {background-image: url("icons/wma.png");}
|
||||
.icon-wmv {background-image: url("icons/wmv.png");}
|
||||
.icon-xls, .icon-xlsx {background-image: url("icons/xls.png");}
|
||||
.icon-xml {background-image: url("icons/xml.png");}
|
||||
.icon-zip, .icon-rar, .icon-tgz, .icon-gz, .icon-tar, .icon-7z {background-image: url("icons/zip.png");}
|
||||
|
||||
}//end of wra_body
|
||||
|
||||
.wra_body_server {
|
||||
height: 380px;
|
||||
|
||||
.online {
|
||||
display: block !important;
|
||||
height: 365px;
|
||||
}
|
||||
}
|
||||
|
||||
}//start of wrapper
|
||||
|
||||
.wra-btn-group {
|
||||
clear: both;
|
||||
zoom: 1;
|
||||
text-align: right;
|
||||
padding: 10px 20px 20px 0px;
|
||||
|
||||
.tip-text {
|
||||
float: left;
|
||||
padding: 5px 10px;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
/**
|
||||
* HTML5 批量文件上传
|
||||
* @author yangjian <yangjian102621@gmail.com>
|
||||
* @since v4.1.12(2017-09-12)
|
||||
* @site http://git.oschina.net/blackfox/kindeditor
|
||||
*/
|
||||
|
||||
KindEditor.plugin('multiimage', function(K) {
|
||||
var self = this, name = 'multiimage',
|
||||
uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php'),
|
||||
fileManagerJson = K.undef(self.fileManagerJson, self.basePath + 'php/file_manager_json.php'),
|
||||
imageSizeLimit = K.undef(self.imageSizeLimit, 2048), //单位KB
|
||||
imageFileTypes = K.undef(self.imageFileTypes, 'jpg|png|gif|jpeg'),
|
||||
imageUploadLimit = K.undef(self.imageUploadLimit, 20),
|
||||
filePostName = K.undef(self.filePostName, 'imgFile'),
|
||||
extraParams = K.undef(self.extraFileUploadParams, {}),
|
||||
lang = self.lang(name + '.');
|
||||
|
||||
if(typeof jQuery == 'undefined') {
|
||||
K.options.errorMsgHandler(lang.depJQueryError, "error");
|
||||
return;
|
||||
} else {
|
||||
K.loadScript(K.options.pluginsPath+name+"/BUpload.js");
|
||||
K.loadStyle(K.options.pluginsPath+name+"/css/upload.css");
|
||||
}
|
||||
|
||||
//锁屏插件
|
||||
K.locker = function () {
|
||||
var docWidth = Math.max(document.documentElement.clientWidth, document.body.clientWidth);
|
||||
var docHeight = Math.max(document.documentElement.clientHeight, document.body.clientHeight, $(document).height()) + document.documentElement.scrollTop;
|
||||
return K.widget({
|
||||
x : 0,
|
||||
y : 0,
|
||||
cls : 'ke-dialog-lock',
|
||||
width : docWidth,
|
||||
height : docHeight
|
||||
});
|
||||
}
|
||||
self.plugin.multiImageDialog = function(options) {
|
||||
|
||||
var clickFn = options.clickFn;
|
||||
var locker = K.locker();
|
||||
locker.show();
|
||||
|
||||
var dialog = new BUpload({
|
||||
src : filePostName,
|
||||
upload_url : uploadJson,
|
||||
list_url : fileManagerJson, //图片列表数据获取url
|
||||
max_filesize : imageSizeLimit,
|
||||
max_filenum : imageUploadLimit,
|
||||
ext_allow : imageFileTypes,
|
||||
extra_params : extraParams,
|
||||
lang : lang,
|
||||
top : self.dialogOffset,
|
||||
fileType : "image",
|
||||
errorHandler : K.options.errorMsgHandler,
|
||||
callback : function(data) {
|
||||
//console.log(data);
|
||||
clickFn.call(this, data);
|
||||
},
|
||||
close : function () {
|
||||
locker.remove();
|
||||
}
|
||||
});
|
||||
|
||||
return dialog;
|
||||
};
|
||||
self.clickToolbar(name, function() {
|
||||
self.plugin.multiImageDialog({
|
||||
clickFn : function (urlList) {
|
||||
|
||||
if (urlList.length === 0) {
|
||||
return;
|
||||
}
|
||||
K.each(urlList, function(i, data) {
|
||||
if (self.afterUpload) {
|
||||
self.afterUpload.call(self, data, data, 'multiimage');
|
||||
}
|
||||
self.exec('insertimage', data);
|
||||
});
|
||||
// Bugfix: [Firefox] 上传图片后，总是出现正在加载的样式，需要延迟执行hideDialog
|
||||
setTimeout(function() {
|
||||
self.hideDialog().focus();
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,95 @@
|
||||
<div class="uedbody">
|
||||
<div class="ued_title">
|
||||
<div class="uedbar">
|
||||
<span>多图上传</span>
|
||||
</div>
|
||||
<div class="close_but icon" title="关闭对话框"></div>
|
||||
</div>
|
||||
|
||||
<div class="wrapper">
|
||||
<div id="wra_head" class="wra_head">
|
||||
<span class="tab tab-upload focus" tab="upload-panel">本地上传</span>
|
||||
<span class="tab tab-online" tab="online">文件服务器</span>
|
||||
<span class="tab tab-search" tab="searchbox">图片搜索</span>
|
||||
</div>
|
||||
|
||||
<div class="wra_body">
|
||||
<div class="tab-panel upload-panel">
|
||||
<div class="wra_pla">
|
||||
<div class="upload-image-placeholder">
|
||||
<div class="btn btn-primary image-select">点击选择图片</div>
|
||||
<input type="file" name="src" class="webuploader-element-invisible" multiple="multiple">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="image-list-box" style="display: none;">
|
||||
<div class="wra_bar">
|
||||
<div class="info fl">选中 {img.num} 张图片，共 {img.size} K</div>
|
||||
<div class="fr">
|
||||
<span class="btn btn-default btn-continue-add">继续添加</span>
|
||||
<span class="btn btn-primary btn-start-upload">开始上传</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul class="filelist">
|
||||
<?php for ( $i = 0; $i < 20; $i++ ) {?>
|
||||
<li>
|
||||
<div class="imgWrap">
|
||||
<img src="http://ueditor.baidu.com/server/ueditor/upload/image/3.jpg?noCache=iokrzz5b" width="113" height="113" border="0" />
|
||||
</div>
|
||||
<div class="file-opt-box clearfix">
|
||||
<span class="remove">删除</span>
|
||||
<span class="rotateRight">向右旋转</span>
|
||||
<span class="rotateLeft">向左旋转</span>
|
||||
</div>
|
||||
<div class="success"></div>
|
||||
<div class="error">这是错误信息</div>
|
||||
<div class="progress"><span style="display: none; width: 0px;"></span></div>
|
||||
</li>
|
||||
<?php }?>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel online">
|
||||
<div class="imagelist">
|
||||
<ul class="list">
|
||||
<li>
|
||||
<img style="margin-left: -33px;" src="http://ueditor.baidu.com/server/ueditor/upload/image/10.jpg?noCache=iokuzbsf" height="113" width="179">
|
||||
<span class="ic <?php if ($i%2==0) {echo "selected";}?>"></span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="no-data">(⊙o⊙)亲，没有多数据了。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tab-panel searchbox">
|
||||
<div class="search-bar">
|
||||
<input class="searTxt" type="text" placeholder="请输入搜索关键词" />
|
||||
<input value="百度一下" class="btn btn-primary btn-search" type="button" />
|
||||
<input value="清空搜索" class="btn btn-default btn-cancel" type="button" />
|
||||
</div>
|
||||
|
||||
<div class="search-imagelist-box">
|
||||
<ul class="search-list">
|
||||
<li>
|
||||
<img style="margin-left: -33px;" src="http://ueditor.baidu.com/server/ueditor/upload/image/10.jpg?noCache=iokuzbsf" height="113" width="179">
|
||||
<span class="ic <?php if ($i%2==0) {echo "selected";}?>"></span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="no-data">(⊙o⊙)亲，没有多数据了。</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="loading-icon"></div>
|
||||
</div><!-- end of wrapper -->
|
||||
|
||||
</div>
|
||||
|
||||
<div class="wra-btn-group">
|
||||
<span class="btn btn-primary btn-confirm">确认</span>
|
||||
<span class="btn btn-default btn-cancel">取消</span>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user