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

左手的ㄟ右手 2022-03-21 03:49 406阅读 0赞

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

![2019013015573212.png][]      ![2019013015564147.png][]

**1、介绍和配置参数**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1][]

![20190418165344371.png][]

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

**2、引入 css 和 js 文件： **

<link rel="stylesheet" type="text/css" href="static/plugins/jQuery.filer/css/reset.css">
        <link rel="stylesheet" type="text/css" href="static/plugins/jQuery.filer/css/jquery.filer.css">
        <link rel="stylesheet" type="text/css" href="static/plugins/jQuery.filer/css/jquery.filer-dragdropbox-theme.css">
        <link rel="stylesheet" type="text/css" href="static/plugins/jQuery.filer/css/tomorrow.css">
        <link rel="stylesheet" type="text/css" href="static/plugins/jQuery.filer/css/custom.css">
    
    
    <script src="static/jquery/jquery-1.12.4.js"></script>
    
    <script src="static/plugins/jQuery.filer/js/jquery.filer.min.js" type="text/javascript"></script>
    <script src="static/plugins/jQuery.filer/js/prettify.js" type="text/javascript"></script>
    <script src="static/plugins/jQuery.filer/js/scripts.js" type="text/javascript"></script>
    <script src="static/plugins/jQuery.filer/js/custom.js" type="text/javascript"></script>
    <script type="text/javascript">

### 一、使用demo ###

**1、文件上传 form**

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

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

$(document).ready(function() {
        // 好几个定义好的demo 
    
        //定义自己  
        $('#filerdemo-fileInput').filer({
            changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-folder"></i></div><div class="jFiler-input-text"><h3>Click on this box</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn blue-light">上传文件</a></div></div>',
            showThumbs: true,
            theme: "dragdropbox",
            templates: filer_default_opts.templates,
            uploadFile: filer_default_opts.uploadFile,
            onRemove: filer_default_opts.onRemove
        });   
    });

浏览结果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 2][]

*  具体根据业务 在 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."
    			}
    		}

[http_www.jq22.com_jquery-info11363]: http://www.jq22.com/jquery-info11363
[2019013015573212.png]: https://img-blog.csdnimg.cn/2019013015573212.png
[2019013015564147.png]: /images/20220321/8ec2de53028245cf8dbc93d359232a61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70]: /images/20220321/acad4562c90c480ca7489b5099e5db27.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 1]: /images/20220321/8137052f2ecc492995a3c3dd549293e8.png
[20190418165344371.png]: /images/20220321/a2dc20dbdc2a42848c94088a34e2de63.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNDAyODU0_size_16_color_FFFFFF_t_70 2]: /images/20220321/da3a191a68644fd98c30004087591f6e.png