file_upload_demo.html

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
<!DOCTYPE html>
< html >
< head  lang = "en" >
     < meta  charset = "UTF-8" >
     < title ></ title >
 
     < script  src = "../static/dist/js/jquery-1.11.3.min.js" ></ script >
     < script  src = "../static/js/ys_ui_plugin/simple_file_upload.js" ></ script >
</ head >
< body >
     < a  href = "javascript:void(0)" >上传文件</ a >
 
     < img  />
 
 
     < script >
         $("a").simpleUploadFile({
             changeCallback:function(file){
                 var fileReader = new FileReader();
                 fileReader.onload = function(){
                     $("img").attr("src",this.result);
                 };
                 fileReader.readAsDataURL(file);
             }
         });
 
     </ script >
 
</ body >
</ html >

simple_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
63
64
65
66
67
68
69
70
71
( function ($){
 
     var  defaultSettings = {
         acceptTypes:[ "jpg" , "png" ],  // 接受的上传文件类型
         changeCallback: function (file){
 
         }  // 自定义input[type=file] change事件
     };
 
     var  renderHtml =  "<input type='file' style='display:none;'/>" ;
 
     // 添加隐藏的
     function  renderInputFile(target,settings){
         // 生成dialog唯一标识
         var  id =  "ys_simple_file_upload_" + new  Date().getTime()+ "" +parseInt(Math.random());
         $(target).attr( "ys_simple_file_upload" ,id);
         $(renderHtml).attr( "id" ,id).appendTo( "html" );  // 添加到文档中去
         return  $( "#" +id);
     }
 
     function  bindEventHandlers(container,settings){
         var  changeCallback = settings.changeCallback;
 
         $(container).change( function (e){
             e.preventDefault();
             e.stopPropagation();
             var  file = e.target.files[0];
 
 
             if (!validateFileType(file,settings)){
                 alert( "文件类型不正确!" );
                 return ;
             }
 
             changeCallback(file);
         });
     }
 
     // 验证文件类型
     function  validateFileType(file,settings){
         var  acceptTypes = settings.acceptTypes;
         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  options = {
         simpleUploadFile: function (settings) {
             var  mergedSettings = {};
 
             $.extend(mergedSettings,defaultSettings,settings);
 
             var  container = renderInputFile( this ,mergedSettings);
 
             bindEventHandlers(container,mergedSettings);
 
             $( this ).click( function (e){
                 e.preventDefault();
                 e.stopPropagation();
                 $(container).click();
             });
         }
     };
     $.fn.extend(options);
})(jQuery);