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