基于easyui和ajaxfileupload制作文件上传组件fileUploader

//依赖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>
效果如下：

 

.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;
}

View fileUploader.css

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;
    }
}

View fileUploader.js

        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');
            }

 

转载于:https://www.cnblogs.com/qqjohn/p/8579814.html