bootstrap-fileinput简单使用

bootstrap-fileinput tp5中简单使用:

官网：http://plugins.krajee.com/file-input

   从GitHub下载：https://github.com/kartik-v/bootstrap-fileinput.git 到本地

页面引入 需要 jQuery、bootstrap、font-awesome

<link rel="stylesheet" href="css/fileinput.css">
<script src="fileinput.js"></script>

// 中文汉化包
<script src="locales/zh.js"></script>

模板中如下：

<div class="form-group">

    <label class="col-sm-2 control-label">缩略图</label>

    <div class="col-sm-9">

        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">选择图片</button>

    </div>

    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-lg" role="document">

            <div class="modal-content">

                <div class="modal-header">

                    <h5 class="modal-title" id="exampleModalLabel">文件上传</h5>

                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                        <span aria-hidden="true">×</span>

                    </button>

                </div>

                <div class="modal-body">

                    <form>

                        <div class="file-loading">

                            <input id="files" name="file[]" multiple type="file">

                        </div>

                        <div id="kartik-file-errors"></div>

                    </form>

                </div>

                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>

                    <button type="reset" class="btn btn-primary" onclick="resetUpload(this)">确定</button>

                </div>

            </div>

        </div>

    </div>

</div>

js使用:

$("#files").fileinput({ language: 'zh', uploadUrl: "{:url('system/component/uploader')}", resizeImage :true, maxImageWidth :80, showPreview: true,}).on('fileuploaded', function(res) { // 上传成功后回调处理 console.log(res)});// 上传成功后清空预览区function resetUpload(obj) { $("#files").fileinput('clear'); $(obj).attr("data-dismiss","modal");}tp5后端：

public function uploader ()
{
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file( 'file' );
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move( ROOT_PATH . 'public' . DS . 'uploads' );

if ( $info ) {
halt($info->fileName);
$data = [
'name'       => $info['info']['name'] ,
'filename'   => $info->getFilename() ,
'path'       => 'uploads/' . $info->getSaveName() ,
'extension'  => $info->getExtension() ,
'createtime' => time() ,
'size'       => $info->getSize() ,
];
Db::name( 'attachment' )->insert( $data );
echo json_encode( [ 'valid' => 1 , 'message' => HD_ROOT . 'uploads/' . $info->getSaveName() ] );
}
else {
// 上传失败获取错误信息
echo json_encode( [ 'valid' => 0 , 'message' => $file->getError() ] );
}
}

重要：后端回调一定要是json数据，没有也要返回一个空对象