简单js fileUpload控件(单例)

Posted 2020-08-15

single_file_upload.js

var YsUIWidgets=YsUIWidgets||{};
YsUIWidgets.uploadFile = (function($){
    var container  = null;
    var changeCallback = function(){};
    var acceptTypes = ["jpg","png"];// 接受的上传文件类型

    var renderhtml = "<input type=‘file‘ name=‘single-file-upload‘ style=‘display:none;‘/>";

    // 添加隐藏的
    function renderInputFile(){
        // 生成dialog唯一标识
        container = $(renderHtml).appendTo("html"); // 添加到文档中去
        return container;
    }

    function bindEventHandlers(){
        $(container).change(function(e){
            e.preventDefault();
            e.stopPropagation();
            var file = e.target.files[0];
            if(!validateFileType(file,acceptTypes)){
                alert("文件类型不正确!");
                return;
            }
            changeCallback(file);
            // 清除value
            $(this).val("");
        });
    }

    // 验证文件类型
    function validateFileType(file,acceptTypes){console.log("valid");
        var name = file.name;
        var fileSuffix = name.substr(name.lastIndexOf(".")+1);
        for(var i=0;i<acceptTypes.length;i++){
            var acceptType = acceptTypes[i];
            if(acceptType==fileSuffix){
                return true;
            }
        }
        return false;
    }

    var initialized = false;
    // 初始化方法
    function init(){
        if(initialized){
            return;
        }
        renderInputFile();
        bindEventHandlers();
        initialized = true;
    }

    var uploadFile = function(options){
        if(!initialized){init();} // 如果未初始化则初始化
        changeCallback = options.changeCallback||changeCallback;
        acceptTypes = options.acceptTypes||acceptTypes;
        $(container).click();
    };
    return uploadFile;
})(jQuery);