(function (K) { var ZYFILE = { fileInput: null, // 选择文件按钮dom对象 uploadInput: null, // 上传文件按钮dom对象 dragDrop: null, //拖拽敏感区域 url: "", // 上传action路径 filePostName: "imgFile", // 上传action路径 uploadFile: [], // 需要上传的文件数组 lastUploadFile: [], // 上一次选择的文件数组,方便继续上传使用 perUploadFile: [], // 存放永久的文件数组,方便删除使用 fileNum: 0, // 代表文件总个数,因为涉及到继续添加,所以下一次添加需要在它的基础上添加索引 /* 提供给外部的接口 */ filterFile: function (files) { // 提供给外部的过滤文件格式等的接口,外部需要把过滤后的文件返回 return files; }, onSelect: function (selectFile, files) { // 提供给外部获取选中的文件,供外部实现预览等功能 selectFile:当前选中的文件 allFiles:还没上传的全部文件 }, onDelete: function (file, files) { // 提供给外部获取删除的单个文件,供外部实现删除效果 file:当前删除的文件 files:删除之后的文件 }, onProgress: function (file, loaded, total) { // 提供给外部获取单个文件的上传进度,供外部实现上传进度效果 }, onSuccess: function (file, responseInfo) { // 提供给外部获取单个文件上传成功,供外部实现成功效果 }, onFailure: function (file, responseInfo) { // 提供给外部获取单个文件上传失败,供外部实现失败效果 }, onComplete: function (responseInfo) { // 提供给外部获取全部文件上传完成,供外部实现完成效果 }, /* 内部实现功能方法 */ // 获得选中的文件 //文件拖放 funDragHover: function (e) { e.stopPropagation(); e.preventDefault(); this[e.type === "dragover" ? "onDragOver" : "onDragLeave"].call(e.target); return this; }, // 获取文件 funGetFiles: function (e) { var self = this; // 取消鼠标经过样式 this.funDragHover(e); // 从事件中获取选中的所有文件 var files = e.target.files || e.dataTransfer.files; self.lastUploadFile = this.uploadFile; this.uploadFile = this.uploadFile.concat(this.filterFile(files)); var tmpFiles = []; // 因为jquery的inArray方法无法对object数组进行判断是否存在于,所以只能提取名称进行判断 var lArr = []; // 之前文件的名称数组 var uArr = []; // 现在文件的名称数组 $.each(self.lastUploadFile, function (k, v) { lArr.push(v.name); }); $.each(self.uploadFile, function (k, v) { uArr.push(v.name); }); $.each(uArr, function (k, v) { // 获得当前选择的每一个文件 判断当前这一个文件是否存在于之前的文件当中 if ($.inArray(v, lArr) < 0) { // 不存在 tmpFiles.push(self.uploadFile[k]); } }); // 如果tmpFiles进行过过滤上一次选择的文件的操作,需要把过滤后的文件赋值 //if(tmpFiles.length!=0){ this.uploadFile = tmpFiles; //} // 调用对文件处理的方法 this.funDealtFiles(); return true; }, // 处理过滤后的文件,给每个文件设置下标 funDealtFiles: function () { var self = this; // 目前是遍历所有的文件,给每个文件增加唯一索引值 $.each(this.uploadFile, function (k, v) { // 因为涉及到继续添加,所以下一次添加需要在总个数的基础上添加 v.index = self.fileNum; // 添加一个之后自增 self.fileNum++; }); // 先把当前选中的文件保存备份 var selectFile = this.uploadFile; // 要把全部的文件都保存下来,因为删除所使用的下标是全局的变量 this.perUploadFile = this.perUploadFile.concat(this.uploadFile); // 合并下上传的文件 this.uploadFile = this.lastUploadFile.concat(this.uploadFile); // 执行选择回调 this.onSelect(selectFile, this.uploadFile); return this; }, // 处理需要删除的文件 isCb代表是否回调onDelete方法 // 因为上传完成并不希望在页面上删除div,但是单独点击删除的时候需要删除div 所以用isCb做判断 funDeleteFile: function (delFileIndex, isCb) { var self = this; // 在each中this指向没个v 所以先将this保留 var tmpFile = []; // 用来替换的文件数组 // 合并下上传的文件 var delFile = this.perUploadFile[delFileIndex]; // 目前是遍历所有的文件,对比每个文件 删除 $.each(this.uploadFile, function (k, v) { if (delFile != v) { // 如果不是删除的那个文件 就放到临时数组中 tmpFile.push(v); } }); this.uploadFile = tmpFile; if (isCb) { // 执行回调 // 回调删除方法,供外部进行删除效果的实现 self.onDelete(delFile, this.uploadFile); } return true; }, // 上传多个文件 funUploadFiles: function () { var self = this; // 在each中this指向没个v 所以先将this保留 // 遍历所有文件 ,在调用单个文件上传的方法 $.each(this.uploadFile, function (k, v) { self.funUploadFile(v); }); }, // 上传单个个文件 funUploadFile: function (file) { var self = this; // 在each中this指向没个v 所以先将this保留 var formdata = new FormData(); formdata.append(self.filePostName, file); var xhr = new XMLHttpRequest(); // 绑定上传事件 // 进度 xhr.upload.addEventListener("progress", function (e) { // 回调到外部 self.onProgress(file, e.loaded, e.total); }, false); // 完成 xhr.addEventListener("load", function (e) { // 从文件中删除上传成功的文件 false是不执行onDelete回调方法 self.funDeleteFile(file.index, false); // 回调到外部 self.onSuccess(file, xhr.responseText); if (self.uploadFile.length == 0) { // 回调全部完成方法 self.onComplete("全部完成"); } }, false); // 错误 xhr.addEventListener("error", function (e) { // 回调到外部 self.onFailure(file, xhr.responseText); }, false); xhr.open("POST", self.url, true); //xhr.setRequestHeader("X_FILENAME", file.name); xhr.send(formdata); }, // 返回需要上传的文件 funReturnNeedFiles: function () { return this.uploadFile; }, // 初始化 init: function () { // 初始化方法,在此给选择、上传按钮绑定事件 var self = this; // 克隆一个自身 self.uploadFile = []; // 需要上传的文件数组 self.lastUploadFile = []; // 上一次选择的文件数组,方便继续上传使用 self.perUploadFile = []; // 存放永久的文件数组,方便删除使用 self.fileNum = 0; // 代表文件总个数,因为涉及到继续添加,所以下一次添加需要在它的基础上添加索引 if (this.dragDrop) { this.dragDrop.addEventListener("dragover", function (e) { self.funDragHover(e); }, false); this.dragDrop.addEventListener("dragleave", function (e) { self.funDragHover(e); }, false); this.dragDrop.addEventListener("drop", function (e) { self.funGetFiles(e); }, false); } // 如果选择按钮存在 if (self.fileInput) { // 绑定change事件 this.fileInput.addEventListener("change", function (e) { self.funGetFiles(e); this.value = ''; }, false); } // 如果上传按钮存在 if (self.uploadInput) { // 绑定click事件 this.uploadInput.addEventListener("click", function (e) { self.funUploadFiles(e); }, false); } } }; $.fn.zyUpload = function (options, param) { var otherArgs = Array.prototype.slice.call(arguments, 1); if (typeof options == 'string') { var fn = this[0][options]; if ($.isFunction(fn)) { return fn.apply(this, otherArgs); } else { throw ("zyUpload - No such method: " + options); } } return this.each(function () { var para = {}; // 保留参数 var self = this; // 保存组件对象 var defaults = { itemWidth: "140px", // 文件项的宽度 itemHeight: "120px", // 文件项的高度 url: "/upload/UploadAction", // 上传文件的路径 filePostName: "imgFile", // name值 multiple: true, // 是否可以多个文件上传 dragDrop: true, // 是否可以拖动上传文件 del: true, // 是否可以删除文件 finishDel: false, // 是否在上传文件完成后删除预览 /* 提供给外部的接口方法 */ onSelect: function (selectFiles, files) { },// 选择文件的回调方法 selectFile:当前选中的文件 allFiles:还没上传的全部文件 onDelete: function (file, files) { }, // 删除一个文件的回调方法 file:当前删除的文件 files:删除之后的文件 onSuccess: function (file) { }, // 文件上传成功的回调方法 onFailure: function (file) { }, // 文件上传失败的回调方法 onComplete: function (responseInfo) { }, // 上传完成的回调方法 }; para = $.extend(defaults, options); this.init = function () { this.createHtml(); // 创建组件html this.createCorePlug(); // 调用核心js }; /** * 功能:创建上传所使用的html * 参数: 无 * 返回: 无 */ this.createHtml = function () { var multiple = ""; // 设置多选的参数 para.multiple ? multiple = "multiple" : multiple = ""; var html = ''; html += [ '
', '
', '
', '', '', '', '
', '
' + options.uploadDesc + '
', '', '', '', '
', '
', '
', '
', '', '', '
', ].join(''); $(self).append(html); $(self).data('uploadList', []); // 初始化html之后绑定按钮的点击事件 this.addEvent(); }; /** * 功能:显示统计信息和绑定继续上传和上传按钮的点击事件 * 参数: 无 * 返回: 无 */ this.funSetStatusInfo = function (files) { return ; }; /** * 功能:过滤上传的文件格式等 * 参数: files 本次选择的文件 * 返回: 通过的文件 */ this.funFilterEligibleFile = function (files) { var arrFiles = []; // 替换的文件数组 for (var i = 0, file; file = files[i]; i++) { if (file.size >= 51200000) { alert('您这个"' + file.name + '"文件大小过大'); } else { // 在这里需要判断当前所有文件中 arrFiles.push(file); } } return arrFiles; }; /** * 功能: 处理参数和格式上的预览html * 参数: files 本次选择的文件 * 返回: 预览的html */ this.funDisposePreviewHtml = function (file, e) { var html = ""; var imgWidth = parseInt(para.itemWidth.replace("px", "")) - 5; // 处理配置参数删除按钮 var delHtml = ""; if (para.del) { // 显示删除按钮 delHtml = ''; } // 处理不同类型文件代表的图标 var fileImgSrc = "control/images/fileType/"; if (file.type.indexOf("rar") > 0) { fileImgSrc = fileImgSrc + "rar.png"; } else if (file.type.indexOf("zip") > 0) { fileImgSrc = fileImgSrc + "zip.png"; } else if (file.type.indexOf("text") > 0) { fileImgSrc = fileImgSrc + "txt.png"; } else { fileImgSrc = fileImgSrc + "file.png"; } // 图片上传的是图片还是其他类型文件 if (file.type.indexOf("image") == 0) { html += '
'; html += '
'; html += '
'; html += '

' + file.name + '

'; html += delHtml; // 删除按钮的html html += '
'; html += '
'; html += ' '; html += ' '; /* html += '
'; html += '
'; */ html += '
'; html += '

'; html += '

上传失败,请重试

'; html += '

'; html += '
'; } else { html += '
'; html += '
'; html += '
'; html += '

' + file.name + '

'; html += delHtml; // 删除按钮的html html += '
'; html += '
'; html += ' '; html += ' '; html += ' '; html += '

'; html += '

上传失败,请重试

'; html += '

'; html += '
'; } return html; }; /** * 功能:调用核心插件 * 参数: 无 * 返回: 无 */ this.createCorePlug = function () { var params = { fileInput: $(self).find(".fileImage").get(0), uploadInput: $(self).find(".fileSubmit").get(0), dragDrop: $(self).find(".fileDragArea").get(0), url: $(self).find(".uploadForm").attr("action"), filePostName: para.filePostName, filterFile: function (files) { // 过滤合格的文件 return self.funFilterEligibleFile(files); }, onSelect: function (selectFiles, allFiles) { para.onSelect(selectFiles, allFiles); // 回调方法 self.funSetStatusInfo(ZYFILE.funReturnNeedFiles()); // 显示统计信息 var html = '', i = 0; // 组织预览html var funDealtPreviewHtml = function () { file = selectFiles[i]; if (file) { var reader = new FileReader() reader.onload = function (e) { // 处理下配置参数和格式的html html += self.funDisposePreviewHtml(file, e); i++; // 再接着调用此方法递归组成可以预览的html funDealtPreviewHtml(); } reader.readAsDataURL(file); } else { // 走到这里说明文件html已经组织完毕,要把html添加到预览区 funAppendPreviewHtml(html); } }; // 添加预览html var funAppendPreviewHtml = function (html) { // 添加到添加按钮前 $(self).find(".preview").append(html); // 绑定删除按钮 funBindDelEvent(); funBindHoverEvent(); }; // 绑定删除按钮事件 var funBindDelEvent = function () { if ($(self).find(".file_del").length > 0) { // 删除方法 $(self).find(".file_del").click(function () { ZYFILE.funDeleteFile(parseInt($(this).attr("data-index")), true); return false; }); } if ($(self).find(".file_edit").length > 0) { // 编辑方法 $(self).find(".file_edit").click(function () { // 调用编辑操作 //ZYFILE.funEditFile(parseInt($(this).attr("data-index")), true); return false; }); } }; // 绑定显示操作栏事件 var funBindHoverEvent = function () { $(self).find(".upload_append_list").hover( function (e) { $(this).find(".file_bar").addClass("file_hover"); }, function (e) { $(this).find(".file_bar").removeClass("file_hover"); } ); }; funDealtPreviewHtml(); }, onDelete: function (file, files) { // 移除效果 $(self).find(".uploadList_" + file.index).fadeOut(); // 重新设置统计栏信息 self.funSetStatusInfo(files); var list = $(self).data('uploadList'); $.each(list, function (k, v) { if (file.index == v.index) { list.splice(k, 1); } }) }, onProgress: function (file, loaded, total) { var eleProgress = $(self).find(".uploadProgress_" + file.index), percent = (loaded / total * 100).toFixed(2) + '%'; if (eleProgress.is(":hidden")) { eleProgress.show(); } eleProgress.css("width", percent); }, onSuccess: function (file, response) { file.res = JSON.parse(response); $(self).data('uploadList').push(file); $(self).find(".uploadProgress_" + file.index).hide(); $(self).find(".uploadSuccess_" + file.index).show(); //$(self).find(".uploadInf").append("

上传成功,文件地址是:" + response + "

"); // 根据配置参数确定隐不隐藏上传成功的文件 if (para.finishDel) { // 移除效果 $(self).find(".uploadList_" + file.index).fadeOut(); // 重新设置统计栏信息 self.funSetStatusInfo(ZYFILE.funReturnNeedFiles()); } }, onFailure: function (file) { $(self).find(".uploadProgress_" + file.index).hide(); $(self).find(".uploadSuccess_" + file.index).show(); $(self).find(".uploadInf").append("

文件" + file.name + "上传失败!

"); //$(self).find(".uploadImage_" + file.index).css("opacity", 0.2); }, onComplete: function (response) { }, onDragOver: function () { $(this).addClass("upload_drag_hover"); }, onDragLeave: function () { $(this).removeClass("upload_drag_hover"); } }; ZYFILE = $.extend(ZYFILE, params); ZYFILE.init(); }; /** * 功能:绑定事件 * 参数: 无 * 返回: 无 */ this.addEvent = function () { // 如果快捷添加文件按钮存在 if ($(self).find(".filePicker").length > 0) { // 绑定选择事件 $(self).find(".filePicker").bind("click", function (e) { $(self).find(".fileImage").click(); }); } // 绑定继续添加点击事件 $(self).find(".webuploader_pick").bind("click", function (e) { $(self).find(".fileImage").click(); }); // 绑定上传点击事件 $(self).find(".upload_btn").bind("click", function (e) { // 判断当前是否有文件需要上传 if (ZYFILE.funReturnNeedFiles().length > 0) { $(self).find(".fileSubmit").click(); } else { alert("请先选中文件再点击上传"); } }); // 如果快捷添加文件按钮存在 if ($(self).find(".rapidAddImg").length > 0) { // 绑定添加点击事件 $(self).find(".rapidAddImg").bind("click", function (e) { $(self).find(".fileImage").click(); }); } }; // 初始化上传控制层插件 this.init(); }); }; })(KindEditor); KindEditor.plugin('multiimage', function (K) { var self = this, name = 'multiimage', formatUploadUrl = K.undef(self.formatUploadUrl, true), uploadJson = K.undef(self.uploadJson, self.basePath + '/Home/Notify/mulUploadImg'), imgPath = self.pluginsPath + 'multiimage/images/', imageSizeLimit = K.undef(self.imageSizeLimit, '2MB'), imageFileTypes = K.undef(self.imageFileTypes, '*.jpg;*.gif;*.png'), imageUploadLimit = K.undef(self.imageUploadLimit, 20), filePostName = K.undef(self.filePostName, 'imgFile'), lang = self.lang(name + '.'); self.plugin.multiImageDialog = function (options) { var clickFn = options.clickFn, uploadDesc = K.tmpl(lang.uploadDesc, { uploadLimit: imageUploadLimit, sizeLimit: imageSizeLimit }); var html = [ '
', '
', '
', '
' ].join(''); var dialog = self.createDialog({ name: name, width: 650, height: 510, title: self.lang(name), body: html, previewBtn: { name: lang.insertAll, click: function (e) { var urlList = []; $.each(uploadEle.data('uploadList'), function (k, v) { urlList.push({ url: v.res.url, title: v.name, }); }) clickFn.call(self, urlList); } }, yesBtn: { name: lang.clearAll, click: function (e) { uploadEle.find('.file_del').click(); } }, beforeRemove: function () { } }), div = dialog.div, uploadEle = $(div[0]).find('.swfupload').zyUpload({ itemWidth: "120px", // 文件项的宽度 itemHeight: "100px", // 文件项的高度 url: uploadJson, // 上传文件的路径 multiple: true, // 是否可以多个文件上传 dragDrop: false, // 是否可以拖动上传文件 del: true, // 是否可以删除文件 finishDel: false, // 是否在上传文件完成后删除预览 uploadDesc: uploadDesc, startButtonValue: lang.startUpload, filePostName: filePostName, /* 外部获得的回调接口 */ onSelect: function (files, allFiles) { // 选择文件的回调方法 }, onDelete: function (file, surplusFiles) { // 删除一个文件的回调方法 }, onSuccess: function (file, res) { // 文件上传成功的回调方法 //zyUpload }, onFailure: function (file) { // 文件上传失败的回调方法 }, onComplete: function (responseInfo) { // 上传完成的回调方法 } }); 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.url, data, 'multiimage'); } self.exec('insertimage', data.url, data.title, data.width, data.height, data.border, data.align); }); // Bugfix: [Firefox] 上传图片后,总是出现正在加载的样式,需要延迟执行hideDialog setTimeout(function () { self.hideDialog().focus(); }, 0); } }); }); });