jQuery HTML5文件上传美化插件jQuery.filer

下载及详情参考jquery插件库：http://www.jq22.com/jquery-info11363

           

1、介绍和配置参数

     

   

     

    更多配置参数 前往 jquery插件库

2、引入 css 和 js 文件： 

 

一、使用demo

    1、文件上传 form

        input 中 type="file" 输入框，起个 id， id后面用的到

                        
                            
                            
                                描述：
                                
                            
                            
                                附件
                                
                                    
                                
                            
                            
                                
                                    提交
                                
                            
                            
                        
 

 

 

2、在 custom.js 中 根据 id 初始化该上传文件插件

$(document).ready(function() {
    // 好几个定义好的demo 

    //定义自己  
    $('#filerdemo-fileInput').filer({
        changeInput: '
Click on this box or
上传文件
',
        showThumbs: true,
        theme: "dragdropbox",
        templates: filer_default_opts.templates,
        uploadFile: filer_default_opts.uploadFile,
        onRemove: filer_default_opts.onRemove
    });   
});

浏览结果：  

     

 

• 具体根据业务 在 custom.js 和 jquery.filer.js 修改/添加 配置参数 和 业务处理。

1） jquery.filer.js 修改 提示框信息

            captions: {
			button: "Choose Files",
			feedback: "Choose files To Upload",
			feedback2: "files were chosen",
			drop: "Drop file here to Upload",
			removeConfirmation: "确定要删除该文件吗?",
			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."
			}
		}