//依赖jquery, jquery easyui
<script type="text/javascript" src="${ctx}/ajaxfileupload.js"></script> //引入ajaxfileupload,用于文件上传到后台
//红色部分是自定义组件核心
<link rel="stylesheet" href="${ctx}/static/uploader/css/fileUploader.css">
<script src="${ctx}/static/uploader/js/fileUploader.js" type="text/javascript"></script>
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
.uploader-preview-container { min-height: 246px; } .uploader-preview-frame { display: table; margin: 8px; height: 160px; border: 1px solid #ddd; box-shadow: 1px 1px 5px 0px #a2958a; padding: 6px; float: left; text-align: center; vertical-align: middle; } .uploader-preview-frame:hover { box-shadow: 3px 3px 5px 0px #333; } .uploader-footer-caption { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 160px; text-align: center; line-height: 24px; height: 24px; font-size: 11px; color: #777; margin: 5px auto; } .uploader-actions { text-align: right; }
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
var FileUploader = { files: [], option: { target:'', title: '文件上传', width: 790, height: 430, virtualPath: '', uploadSubPath: '', showDeleteBtn: true, showConfirmBtn: true, confirmBtnText: '确定', cancelBtnText: '取消', confirmBtnClick: function() {}, onUploadSuccess: function () { }, initData:[] }, fileUploader: function(option) { this.initOption(option); this.initWindow(); this.popupWindow(); }, initOption: function(opt) { if(!this.isNull(opt.target)) { this.option.target = opt.target; } if(!this.isNull(opt.title)) { this.option.title = opt.title; } if(!this.isNull(opt.width)) { this.option.width = opt.width; } if(!this.isNull(opt.height)) { this.option.height = opt.height; } if(!this.isNull(opt.virtualPath)) { this.option.virtualPath = opt.virtualPath; } if(!this.isNull(opt.uploadSubPath)) { this.option.uploadSubPath = opt.uploadSubPath; } if(!this.isNull(opt.showDeleteBtn)) { this.option.showDeleteBtn = opt.showDeleteBtn; } if(!this.isNull(opt.showConfirmBtn)) { this.option.showConfirmBtn = opt.showConfirmBtn; } if(!this.isNull(opt.confirmBtnText)) { this.option.confirmBtnText = opt.confirmBtnText; } if(!this.isNull(opt.cancelBtnText)) { this.option.cancelBtnText = opt.cancelBtnText; } if(!this.isNull(opt.confirmBtnClick)) { this.option.confirmBtnClick = opt.confirmBtnClick; } if(!this.isNull(opt.onUploadSuccess)) { this.option.onUploadSuccess = opt.onUploadSuccess; } if(this.isNull(opt.initData)) { this.option.initData = []; }else { this.option.initData = opt.initData; } }, initWindow: function() { this.initPreviewContainer(); this.createFileBox(); this.createFooter(); this.initData(); }, initPreviewContainer: function() { var _this = $('#' + this.option.target); _this.empty(); var previewParent = '<div id="' + this.option.target + '_preview_container" class="uploader-preview-container"></div>'; _this.append(previewParent); }, initData: function() {//加载已经存在的文件 var self = this; var initData = this.option.initData; if(initData.length > 0) { for(var i = 0; i < initData.length; i++) { self.createPreviewFrame(initData[i]); } } }, createPreviewFrame: function(file) { var self = this; var _preview_container = $('#' + self.option.target + '_preview_container'); var preview = '<div class="uploader-preview-frame" data-file-url="'+ file.fileUrl +'" data-file-name="'+ file.fileName +'">' + '<img src="'+ (self.isImage(file.fileUrl) ? (self.option.virtualPath + file.fileUrl) : '/resources/images/uploader/other.png') + '" class="file-preview-image" style="width:160px;height:160px;" />' + '<div >' + '<div class="uploader-footer-caption">'+ file.fileName + '</div>' + '<div class="uploader-actions">' + (self.option.showDeleteBtn ? ('<a href="javascript:void(0)" class="textbox-icon icon-remove uploader-remove" οnclick="FileUploader.deleteBtnClick(this)"></a>') : '') + '<a href="'+ (self.option.virtualPath + file.fileUrl) +'" style="margin-left: 10px;" class="textbox-icon icon-search" target="_blank"></a>' + '</div>' + '</div>' + '</div>'; _preview_container.append(preview); self.resetPreviewFrame(); }, deleteBtnClick: function(e) { var self = this; var index = $(e).attr('data-index'); $('#preview_frame_' + index).remove(); self.resetPreviewFrame(); }, isImage: function(fileName) { var isImage = false; var extention = fileName.substring(fileName.lastIndexOf('.')).toLowerCase(); switch (extention) { case '.png' : isImage= true; break; case '.jpeg' : isImage= true; break; case '.bmp' : isImage= true; break; case '.jpg' : isImage= true; break; default: break; } return isImage; }, isNull : function(value){ if(value == null || typeof(value) == 'undefined' || value.length == 0 || value == 'null' || value == 'NULL') return true; return false; }, resetPreviewFrame: function () { $('#' + this.option.target + '_preview_container div[class=uploader-preview-frame]').each(function (i, e) { $(e).attr('id', 'preview_frame_' + i); $(e).find('.uploader-remove').attr('data-index', i); }); }, createFooter: function () { var self = this; var _this = $('#' + this.option.target); var footer = '<div style="text-align: center; padding: 5px;margin-bottom: 10px;">' + (self.option.showConfirmBtn?('<a href="javascript:void(0)" id="uploader_confirm_btn"></a>'):'') + '<a href="javascript:void(0)" style="margin-left: 10px;" id="uploader_cancel_btn"></a>' + '</div>'; _this.append(footer); if(self.option.showConfirmBtn) { $('#uploader_confirm_btn').linkbutton({ text: self.option.confirmBtnText, onClick: function() { self.confirmBtnClick(); } }); } $('#uploader_cancel_btn').linkbutton({ text: self.option.cancelBtnText, onClick: function() { self.cancelBtnClick(); } }); }, confirmBtnClick: function(){ var fileArray = this.getFiles(); this.option.confirmBtnClick(fileArray); }, cancelBtnClick: function(){ $('#' + this.option.target).window('close'); }, popupWindow: function() { $('#' + this.option.target).window({ title: this.option.title, draggable: true, width: this.option.width, height: this.option.height, closed: false, cache: false, modal: true, collapsible: false, minimizable: false }); }, createFileBox: function () { var self = this; var _this = $('#' + this.option.target); var fileBox = '<div style="width:100%;float:left;height:20px;"></div><div style="margin-left:8px;margin-bottom: 20px;">' + '<input id="'+ this.option.target+ '_filebox" name="'+ this.option.target+ '_filebox" style="width:97%;height:35px;"></div>'; _this.append(fileBox); $('#' + this.option.target +'_filebox').filebox({ buttonText: '选择文件', buttonAlign: 'right', // accept: 'image/*', disabled: !(self.option.showConfirmBtn), multiple: true, prompt: '请选择文件', onChange : function(){ var value = $(this).filebox('getValue'); self.onUpload(value, $(this)); } }); }, onUpload: function (value, e) { var self = this; if(!self.isNull(value)){ $.ajaxFileUpload({ type:'POST', url : '/upload', secureuri : false, data : { 'type': self.option.uploadSubPath, }, fileElementId: $(':file[name="'+ self.option.target +'_filebox"]').attr("id"), dataType: 'jsonServlt', success: function(data) { if('1'==data.error) { $.messager.alert("提示","异常,请稍后再试!"); }else if('0' == data.error) { var uploadFile = new Object(); uploadFile.fileUrl = data.url; uploadFile.fileName = data.name; self.createPreviewFrame(uploadFile); } e.filebox("reset"); e.filebox("setValue", ''); }, error : function(data) { $.messager.alert("提示","异常,请稍后再试!"); } }); } }, getFiles: function() { var self = this; self.files = new Array(); $('#' + this.option.target + '_preview_container div[class=uploader-preview-frame]').each(function (i, e) { var file = new Object(); file.fileUrl = $(e).attr('data-file-url'); file.fileName = $(e).attr('data-file-name'); self.files.push(file); }); return self.files; } }
function addMeetingAttatch() {
//目的在于获得initdata---预览已经上传的文件 var meetingAttatch = $.trim($('#meetingAttatch').val()); var initData = new Array(); if(!Base.isNull(meetingAttatch)){ var attatchList= meetingAttatch.split(','); attatchList.forEach(function (attatch) { var file = new Object(); file.fileUrl = attatch; file.fileName = getFileNameByPath(attatch); initData.push(file); }); } var uploader = Object.create(FileUploader); uploader.fileUploader({ target: 'file_add_meeting_div', initData: initData, uploadSubPath: 'MEETING', virtualPath: '/files/', confirmBtnClick: function (uploads) {//自定义确定按钮事件回调函数,参数是所有预览的文件数组【文件对象包含:fileUrl,fileName】 setMeetingAttach(uploads); } }); } function getFileNameByPath(filePath) { return filePath.substring(filePath.lastIndexOf('/') +1); } function setMeetingAttach(uploads) { var uploadArray = new Array(); uploads.forEach(function (uploadFile) { uploadArray.push(uploadFile.fileUrl); }); var files = uploadArray.length > 0 ? uploadArray.join(',') : ''; $('#meetingAttatch').val(files); $('#file_add_meeting_div').window('close'); }