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

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

           

1、介绍和配置参数

     

   

     

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

2、引入 css 和 js 文件： 

    <!-- 引入 filer 的css样式 -->
    <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">

<!-- 引入jQuery  -->
<script src="static/jquery/jquery-1.12.4.js"></script>
<!-- 引入filer 的js -->
<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后面用的到

<form action="" method="post" enctype="multipart/form-data">
                        <table class="table table-bordered">
                            <tbody>
                            <tr>
                                <td>描述：</td>
                                <td><input type="text" name="ms"></td>
                            </tr>
                            <tr>
                                <td>附件</td>
                                <td>
                                    <input type="file" name="file[]" multiple="multiple" id="demo-fileInput-3">
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" style="text-align: center">
                                    <button type="submit" class="btn btn-success">提交</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
 </form>

 

 

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

浏览结果：  

     

 

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