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">&times;</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" οnclick="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数据，没有也要返回一个空对象