317 lines
12 KiB
JavaScript
317 lines
12 KiB
JavaScript
/**
|
||
* HTML5上传插件
|
||
* @author yangjian<yangjian102621@gmail.com>
|
||
* @version 1.0.1
|
||
* @site https://git.oschina.net/blackfox/ajaxUpload
|
||
*/
|
||
(function ($) {
|
||
|
||
//判断浏览器是否支持html5
|
||
// if ( !window.applicationCache )
|
||
// 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.FManager = function (options) {
|
||
options = $.extend({
|
||
lang: {},
|
||
list_url: null,
|
||
data_type: "json",
|
||
fileType: "image", //文件类型，默认是图片，可选flash,media,file
|
||
top: 20,
|
||
multiple: false,
|
||
callback: function (data) {
|
||
console.log(data);
|
||
}
|
||
}, options);
|
||
|
||
var o = {};
|
||
o.dialog = null;
|
||
o.selectedList = new Array(); //the file queue upload successfully
|
||
o.page = 1; //服务器图片列表页码
|
||
o.marker = null, //七牛云上传的分页标识
|
||
o.noRecord = false;
|
||
|
||
//close the dialog
|
||
o.close = function () {
|
||
o.dialog.remove();
|
||
try {
|
||
JDialog.lock.hide();
|
||
} catch (e) {
|
||
}
|
||
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 class="wra_body wra_body_server">');
|
||
builder.append('<div class="tab-panel online"><div class="imagelist"><ul class="list clearfix"></ul><div class="no-data"></div></div></div>');
|
||
builder.append('<div class="loading-icon"></div></div></div><div class="wra-btn-group">');
|
||
builder.append('<div class="tip-text">' + options.lang.loadMoreData + '</div>')
|
||
builder.append('<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 = (Math.max(0, $(window).height() - o.dialog.height())) / 2;
|
||
}
|
||
o.dialog.css({
|
||
left: ($(window).width() - o.dialog.width()) / 2 + "px",
|
||
top: options.top + "px"
|
||
});
|
||
|
||
$(".wrapper", o.dialog).css("max-height", ($(window).height() - 100) + "px");
|
||
//给对话框添加拖拽事件
|
||
o.dialog.draggable({handler: o.dialog.find(".ued_title")});
|
||
loadFilesFromServer();
|
||
|
||
}
|
||
|
||
//绑定元素事件
|
||
function bindEvent() {
|
||
|
||
//关闭对话框
|
||
G(".close_btn").on("click", function () {
|
||
o.close();
|
||
});
|
||
|
||
//点击确认|取消按钮事件
|
||
G(".btn-confirm").on("click", function () {
|
||
options.callback(o.selectedList);
|
||
o.close();
|
||
});
|
||
G(".btn-cancel").on("click", function () {
|
||
o.close();
|
||
});
|
||
|
||
//当滚动条滚到底部时自动去加载图片
|
||
G(".imagelist").on("scroll", function () {
|
||
|
||
if (Math.ceil(this.scrollTop + this.clientHeight) >= this.scrollHeight) {
|
||
loadFilesFromServer();
|
||
}
|
||
});
|
||
|
||
}
|
||
|
||
//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").html(options.lang.noDataText).show();
|
||
return;
|
||
}
|
||
o.page++;
|
||
o.marker = res.extra; //存储marker
|
||
appendFiles(res.data);
|
||
} else {
|
||
G(".online .no-data").text(options.lang.noDataText).show();
|
||
o.noRecord = true;
|
||
}
|
||
|
||
}, "json");
|
||
}
|
||
|
||
//追加元素到图片列表
|
||
function appendFiles(data) {
|
||
|
||
$.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 oriExtension = getFileExt(item.oriURL);
|
||
if (oriExtension == '') oriExtension = "default";
|
||
oriExtension = oriExtension.toLowerCase();
|
||
//如果不是图片，则根据文件的后缀名去加载对应的缩略图
|
||
var imgSize = formatFileSize(item.filesize) + (item.filename ? " - " + item.filename : ''); //图片尺寸
|
||
if ("mp4|mpeg|flv|mp3|wav|acc|webm".indexOf(oriExtension) > -1) {
|
||
imgSize = formatFileSize(item.filesize) + (item.filename ? " - " + item.filename : ''); //如果是文件则显示文件大小
|
||
builder.append('<span class="icon-placeholder" data-src="' + item.oriURL + '"><video width="113" height="113" src="' + item.oriURL + '" controls></video></span>');
|
||
} else if ("jpg|jpeg|gif|png|bmp|webp|svg".indexOf(extension) == -1) {
|
||
imgSize = formatFileSize(item.filesize) + (item.filename ? " - " + item.filename : ''); //如果是文件则显示文件大小
|
||
builder.append('<span class="icon-placeholder icon-default icon-' + extension + '" data-src="' + item.oriURL + '"></span>');
|
||
} else {
|
||
imgSize = item.width + 'x' + item.height + ' ' + imgSize;
|
||
builder.append('<img src="' + item.thumbURL + '" data-src="' + item.oriURL + '" border="0">');
|
||
}
|
||
|
||
builder.append('<span class="ic"><em class="img-size">' + imgSize + '</em></span></li>');
|
||
var $image = $(builder.toString());
|
||
|
||
//绑定选择图片事件
|
||
$image.find(".ic").on("click", function () {
|
||
var src = $(this).prev().attr("data-src");
|
||
var oldSrc = $('.selected:eq(0)').prev().attr("data-src");
|
||
if (options.multiple) {
|
||
//多选
|
||
if ($(this).hasClass("selected")) {
|
||
$(this).removeClass("selected");
|
||
o.selectedList.remove(src);
|
||
} else {
|
||
$(this).addClass("selected");
|
||
o.selectedList.push(src);
|
||
}
|
||
} else {
|
||
//这里暂时改成单选
|
||
$('.selected:eq(0)').removeClass("selected"); //移除之前的选中的图片
|
||
o.selectedList.remove(oldSrc);
|
||
$(this).addClass("selected");
|
||
o.selectedList.push(src);
|
||
}
|
||
//console.log(o.selectedList);
|
||
});
|
||
//裁剪显示图片
|
||
// $image.find("img").imageCrop(113, 113);
|
||
G(".imagelist .list").append($image);
|
||
});
|
||
|
||
}
|
||
|
||
//获取文件后缀名
|
||
function getFileExt(filename) {
|
||
if (!filename) return false;
|
||
var position = filename.lastIndexOf('.')
|
||
if (position != -1) {
|
||
return filename.substr(position + 1).toLowerCase();
|
||
}
|
||
return false;
|
||
}
|
||
|
||
//format file size(格式化文件大小)
|
||
function formatFileSize(size) {
|
||
|
||
if (size / 1048576 > 1) {
|
||
return (size / 1048576).toFixed(2) + "MB";
|
||
} else {
|
||
return (size / 1024).toFixed(2) + "KB";
|
||
}
|
||
|
||
}
|
||
|
||
//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);
|