点击查看效果

导入配置

HTML

<form id="link-demo" action="file_upload" method="post" class="fr-file-upload" enctype="multipart/form-data">
    <input type="file" name="frFile"/>
    <a href="#" data-trigger>[导入配置]</a>
    <table data-file-info></table>
</form>

注意

1. form action填写实际后端url
2. <input type="file" name="frFile"/> 中的name为后端File参数名

引用js文件

<script src="http://newfront.free4inno.com/js/plugin/front.js"></script>
<script src="http://newfront.free4inno.com/plugin/fileupload/fileupload.min.js"></script>

JS

$('#link-demo').frFileUpload({uploadCallback: function(data) {
    console.log(data);
}});

frFileUpload插件

$.fn.frFileUpload = function (option) {}
option = {
    acceptFileTypes: 上传文件类型正则表达式; 如/txt$/i; 不传即不匹配
    fileTypeHint   : 文件类型错误时的提示文字; 如'文件类型必须为txt类型';
    dismissTime    : 提示文字消失时间;如默认3000, 即3秒,
    maxFileSize    : 最大文件大小, 单位字节; 如默认30 * 1024, 即30KB,
    uploadCallback : 上传结束时的回调函数, 返回true上传成功, 返回false上传失败; 如默认function(data) { return true; }
}

例子

$('#btn-demo').frFileUpload({
    acceptFileTypes: /(png)|(jpe?g)|(gif)$/i,
    fileTypeHint: '头像必须为png、jpg或gif类型',
    maxFileSize: 100 * 1024,
    uploadCallback: function (data) {
        if (data.status == 'success') {
            console.log('okay')
        } else {
            console.log('bad')
        }
    }
});