single_file_upload.js

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