easyui.hp.multipartImageUpload.js
3.76 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/**
* 显示一个可以多选的上传图片插件
* 作者：黄平
* 日期：2016-11-25
*/
(function($) {
$.fn.multipartImageUpload = function(options, param) {
var self = this;
if (typeof (options) == "string") {
var method = $.fn.multipartImageUpload.methods[options];
if (method){
return method.call(this, param);
}
}
return this.each(function() {
var opt = $.extend({}, $.fn.multipartImageUpload.defaults, options);
$(self).data("multipartImageUpload", opt)
_create(self);
});
};
/**
* 创建
* @param jq
* @returns
*/
function _create(jq) {
var opt = jq.data("multipartImageUpload");
var btnDiv = $("<div>").appendTo(jq);
var contentDiv = $("<div>").appendTo(jq);
if (opt.imgContentWidth) {
contentDiv.css("width", opt.imgContentWidth);
}
if (opt.imgContentHeight) {
contentDiv.css("height", opt.imgContentHeight);
}
var btn = $("<a>").linkbutton($.extend({}, opt.btnParam, {
onClick : function() {
var target = opt.openOnParent === true ? window.top : window.self;
var div = $("<div>").appendTo($(target.document.body));
$.fn.multipartImageUpload.tempParam = opt;
target.$(div).myDialog($.extend({}, opt.dialogParam, {
method : "post",
href : opt.contextPath + "/js/jquery/easyui/myPlugins/easyui.hp.multipartImageUpload.html",
//content : $("<div>").append(content.clone(true, true)).html(),
modal : true,
collapsible : true,
cache : false,
buttons : [{
text : "保存图片",
iconCls : "icon-save",
handler : function() {
var imgList = target.$("#multipartImageUploadImageList div.img-div");
if (!imgList || imgList.length == 0) {
target.$.messager.alert("失败", "没有上传图片", "error");
return;
}
contentDiv.empty();
contentDiv.css("width", (opt.imgWidth + 2) * opt.imgColumnNum);
var divArr = new Array(opt.imgColumnNum);
$(divArr).each(function(index, item) {
divArr.push($("<div>").addClass("multipart-image-upload-waterfall-div").appendTo(contentDiv));
});
$(imgList).each(function(index, item) {
//contentDiv.appdnd($(""));
var i = index % opt.imgColumnNum;
divArr[i].append($("<img>").attr("src", $(item).find("input[type='hidden'][role='img']").val()));
});
target.$(div).dialog("close");
}
}, {
text : "关闭",
iconCls : "icon-cancel",
handler : function() {
target.$(div).dialog("close");
}
}]
}));
}
}));
btnDiv.append(btn);
}
function _getImageUrl(jq) {
var imgList = jq.find("img");
var arr = [];
$(imgList).each(function(index, item) {
arr.push($(imgList).attr("src"));
});
return arr;
}
$.fn.multipartImageUpload.tempParam = {};
$.fn.multipartImageUpload.methods = {
getImageUrl : function() {
return _getImageUrl(this);
}
};
$.fn.multipartImageUpload.event = {
};
$.fn.multipartImageUpload.defaults = $.extend({}, $.fn.multipartImageUpload.event, {
btnParam : {
text : "批量上传",
iconCls : "exter-icon exter-multipart-image"
}, //按钮的属性
dialogParam : { //打开的对话框属性
width : 600,
height : 450,
title : "批量上传"
},
imgContentWidth : 300,
imgContentHeight : 500,
openOnParent : false, //是否在父页面打开对话框
contextPath : "",
multiple : false,
accept : "image/*",
maxSize : 1048576, //每个文件的最大限制（byte）
totalSize : 10 * 1048576, //总共上传文件的最大限制（bytes）
totalNum : 10, //最多上传文件个数
uploadUrl : "", //上传文件的接口地址
saveSuccess : function(result) {}, //图片上传成功后的回调方法
imgColumnNum : 2,
imgWidth : 300
});
})(jQuery);