• jQuery 视频教程

jQuery - Filer.js

Filer.js 是一个 jQuery 插件，用于快速轻松地实现上传文件。

一个简单的 filer.js 示例如下所示 -

<html xmlns = "https://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <link href = "css/jquery.filer.css" type = "text/css" rel = "stylesheet" />
      <link href = "css/themes/jquery.filer-dragdropbox-theme.css" 
         type = "text/css" rel = "stylesheet" />

      <!--jQuery-->
		
      <script type = "text/javascript" 
         src = "https://code.jquery.com/jquery-latest.min.js">
      </script>
      <script type = "text/javascript" src = "js/jquery.filer.min.js"></script>
			
      <script type = "text/javascript">
         $(document).ready(function() {
            $('#input1').filer();
        
            $('.file_input').filer({
               showThumbs: true,
               templates: {
                  box: '<ul class = "jFiler-item-list"></ul>',
                  item: '<li class = "jFiler-item">\
						
                     <div class = "jFiler-item-container">\
                        <div class = "jFiler-item-inner">\
							
                           <div class = "jFiler-item-thumb">\
                              <div class = "jFiler-item-status"></div>\
                              <div class = "jFiler-item-info">\
                                 <span class = "jFiler-item-title"><
                                    b title = "{{fi-name}}">{{fi-name | 
                                    limitTo: 25}}</b></span>\
                              </div>\
                              {{fi-image}}\
                           </div>\
								
                           <div class = "jFiler-item-assets jFiler-row">\
                              <ul class = "list-inline pull-left">\
                                 <li><span class = "jFiler-item-others">
                                    {{fi-icon}} {{fi-size2}}</span></li>\
                              </ul>\
									
                              <ul class = "list-inline pull-right">\
                                 <li><a class = "icon-jfi-trash
                                    jFiler-item-trash-action"></a></li>\
                              </ul>\
									
                           </div>\
								
                        </div>\
                     </div>\
                  </li>',
						
                  itemAppend: '<li class = "jFiler-item">\
						
                     <div class = "jFiler-item-container">\
                        <div class = "jFiler-item-inner">\
                           <div class = "jFiler-item-thumb">\
                              <div class = "jFiler-item-status"></div>\
                              <div class = "jFiler-item-info">\
                                 <span class = "jFiler-item-title"><
                                    b title = "{{fi-name}}">{{fi-name |
                                    limitTo: 25}}</b></span>\
                              </div>\
                              {{fi-image}}\
                           </div>\
									
                           <div class = "jFiler-item-assets jFiler-row">\
                              <ul class = "list-inline pull-left">\
                                 <span class = "jFiler-item-others">
                                    {{fi-icon}} {{fi-size2}}</span>\
                              </ul>\
										
                              <ul class = "list-inline pull-right">\
                                 <li><a class = "icon-jfi-trash 
                                    jFiler-item-trash-action"></a></li>\
                              </ul>\
										
                           </div>\
									
                        </div>\
                     </div>\
                  </li>',
						
                  progressBar: '<div class = "bar"></div>',
                  itemAppendToEnd: true,
                  removeConfirmation: true,
						
                  _selectors: {
                     list: '.jFiler-item-list',
                     item: '.jFiler-item',
                     progressBar: '.bar',
                     remove: '.jFiler-item-trash-action',
                  }
               },
					
               addMore: true,
					
               files: [{
                  name: "appended_file.jpg",
                  size: 5453,
                  type: "image/jpg",
                  file: "https://dummyimage.com/158x113/f9f9f9/191a1a.jpg",
               },{
                  name: "appended_file_2.png",
                  size: 9503,
                  type: "image/png",
                  file: "https://dummyimage.com/158x113/f9f9f9/191a1a.png",
              }]
            });
        
            $('#input2').filer({
               limit: null,
               maxSize: null,
               extensions: null,
               changeInput: '
					
               <div class = "jFiler-input-dragDrop">
                  <div class = "jFiler-input-inner">
						
                     <div class = "jFiler-input-icon">
                        <i class = "icon-jfi-cloud-up-o"></i>
                     </div>
							
                     <div class = "jFiler-input-text">
                        <h3>Drag&Drop files here</h3> 
                        <span style = "display:inline-block; 
                           margin: 15px 0">or</span>
                     </div>
							
                     <a class = "jFiler-input-choose-btn blue">Browse Files</a>
								
                  </div>
               </div>',
					
               showThumbs: true,
               appendTo: null,
               theme: "dragdropbox",
					
               templates: {
                  box: '<ul class = "jFiler-item-list"></ul>',
                  item: '<li class = "jFiler-item">\
                     <div class = "jFiler-item-container">\
                        <div class = "jFiler-item-inner">\
								
                           <div class = "jFiler-item-thumb">\
                              <div class = "jFiler-item-status"></div>\
										
                              <div class = "jFiler-item-info">\
                                 <span class = "jFiler-item-title">
                                    <b title = "{{fi-name}}">{{fi-name | 
                                    limitTo: 25}}</b></span>\
                              </div>\
										
                              {{fi-image}}\
                           </div>\
									
                           <div class = "jFiler-item-assets jFiler-row">\
                              <ul class = "list-inline pull-left">\
                                 <li>{{fi-progressBar}}</li>\
                              </ul>\
										
                              <ul class = "list-inline pull-right">\
                                 <li><a class = "icon-jfi-trash
                                    jFiler-item-trash-action"></a>
                                    </li>\
                              </ul>\
										
                           </div>\
									
                        </div>\
                     </div>\
                  </li>',
						
                  itemAppend: '<li class = "jFiler-item">\
                     <div class = "jFiler-item-container">\
                        <div class = "jFiler-item-inner">\
								
                           <div class = "jFiler-item-thumb">\
                              <div class = "jFiler-item-status"></div>\
										
                              <div class = "jFiler-item-info">\
                                 <span class = "jFiler-item-title">
                                    <b title = "{{fi-name}}">{{fi-name | 
                                    limitTo: 25}}</b></span>\
                              </div>\
										
                              {{fi-image}}\
                           </div>\
									
                           <div class = "jFiler-item-assets jFiler-row">\
                              <ul class = "list-inline pull-left">\
                                 <span class = "jFiler-item-others">
                                    {{fi-icon}} {{fi-size2}}</span>\
                              </ul>\
										
                              <ul class = "list-inline pull-right">\
                                 <li><a class = "icon-jfi-trash
                                    jFiler-item-trash-action"></a>
                                    </li>\
                              </ul>\
										
                           </div>\
									
                        </div>\
                     </div>\
                  </li>',
						
                  progressBar: '<div class = "bar"></div>',
                  itemAppendToEnd: false,
                  removeConfirmation: false,
						
                  _selectors: {
                     list: '.jFiler-item-list',
                     item: '.jFiler-item',
                     progressBar: '.bar',
                     remove: '.jFiler-item-trash-action',
                  }
						
               },
					
               uploadFile: {
                  url: "./php/upload.php",
                  data: {},
                  type: 'POST',
                  enctype: 'multipart/form-data',
                  beforeSend: function(){},
						
                  success: function(data, el){
                     var parent = el.find(".jFiler-jProgressBar").parent();
							
                     el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
                        $("<div class = \"jFiler-item-others text-success\"
                              ><i class = \"icon-jfi-check-circle\">
                                 </i> Success
                           </div>").hide().appendTo(parent).fadeIn("slow");    
                     });
                  },
						
                  error: function(el){
                     var parent = el.find(".jFiler-jProgressBar").parent();
							
                     el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
                        $("<div class = \"jFiler-item-others text-error\"
                              ><i class = \"icon-jfi-minus-circle\">
                                 </i> Error
                           </div>").hide().appendTo(parent).fadeIn("slow");    
                     });
                  },
						
                  statusCode: {},
                  onProgress: function(){},
               },
					
               dragDrop: {
                  dragEnter: function(){},
                  dragLeave: function(){},
                  drop: function(){},
               },
					
               addMore: true,
               clipBoardPaste: true,
               excludeName: null,
               beforeShow: function(){return true},
               onSelect: function(){},
               afterShow: function(){},
               onRemove: function(){},
               onEmpty: function(){},
					
               captions: {
                  button: "Choose Files",
                  feedback: "Choose files To Upload",
                  feedback2: "files were chosen",
                  drop: "Drop file here to Upload",
                  removeConfirmation: "Are you sure you want to remove this file?",
						
                  errors: {
                     filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.",
                     filesType: "Only Images are allowed to be uploaded.",
                     filesSize: "{{fi-name}} is too large! 
                        Please upload file up to {{fi-maxSize}} MB.",
                     filesSizeAll: "Files you've choosed are too large! 
                        Please upload files up to {{fi-maxSize}} MB."
                  }
               }
            });
         });
      </script>
    
      <style>
         .file_input{
            display: inline-block;
            padding: 10px 16px;
            outline: none;
            cursor: pointer;
				
            text-decoration: none;
            text-align: center;
            white-space: nowrap;
				
            font-family: sans-serif;
            font-size: 11px;
            font-weight: bold;
				
            border-radius: 3px;
            color: #008BFF;
            border: 1px solid #008BFF;
            vertical-align: middle;
            background-color: #fff;
            margin-bottom: 10px;
				
            box-shadow: 0px 1px 5px rgba(0,0,0,0.05);
            -webkit-transition: all 0.2s;
            -moz-transition: all 0.2s;
            transition: all 0.2s;
         }
			
         .file_input:hover,
		  
         .file_input:active {
            background: #008BFF;
            color: #fff;
         }
			
      </style>
    
      <!--[if IE]>
         <script src = "https://html5shiv.googlecode.com/svn/trunk/html5.js"
            >
      </script>
      <![endif]-->
   </head>

   <body>
      <div>
         <form action = "./php/upload.php" method = "post"
            enctype = "multipart/form-data">
			
            <!-- filer 1 -->
               <input type = "file" multiple = "multiple" 
                  name = "files[]" id = "input1">
            
               <br>
               <input type = "submit">
         </form>
      </div>
    
      <br>
      <hr>
      <br>
    
      <div>
         <form action = "./php/upload.php" method = "post"
            enctype = "multipart/form-data">
				
            <!-- filer 2 -->
            <a class = "file_input" data-jfiler-name = "files"
               data-jfiler-extensions = "jpg, jpeg, png, gif">
               <i class = "icon-jfi-paperclip"></i> 
               Attach a file</a>
            
            <br>
            <input type = "submit">
         </form>
      </div>
    
      <br>
      <hr>
      <br>
    
      <div style = "background: #f7f8fa;padding: 50px;">
         <!-- filer 3 -->
         <input type = "file" multiple = "multiple" 
            name = "files[]" id = "input2">
        
      </div>
    
   </body>
</html>

这应该产生以下结果 -

点击这里