laravel5.5结合bootstrap上传插件fileinput 上传图片

引入相关js

<script src="{{ asset(\'bootstrap-fileinput/js/fileinput.js\') }}"></script>
<script src="{{ asset(\'bootstrap-fileinput/js/fileinput.min.js\') }}"></script>

html代码

<div class="form-group {{ $errors->has(\'idcard_front\') ? \' has-error\' : \'\' }}">
                        <label class="control-label col-sm-2" for="inputSuccess3">身份证正面</label>
                        <div class="col-sm-6">
                            <input  name="idcard_front" type="file" value="">
                            <input  name="id_card_front" type="hidden" value="">
                        </div>
                        @if ($errors->has(\'idcard_front\'))
                            <span class="help-block">
                      <strong>{{ $errors->first(\'idcard_front\',\'请上传您的身份证正面\') }}</strong>
                 </span>
         @endif
   </div>

js代码

$("#input-b4b").fileinput({
            language: \'zh\', //设置语言
            uploadUrl: "url", //上传的地址
            allowedFileExtensions: [\'jpg\', \'jpeg\', \'gif\', \'png\'],//接收的文件后缀
            browseLabel: \'选择文件\',
            removeLabel: \'删除文件\',
            removeTitle: \'删除选中文件\',
            cancelLabel: \'取消\',
            cancelTitle: \'取消上传\',
            uploadLabel: \'上传\',
            uploadTitle: \'上传选中文件\',
            dropZoneTitle: "请通过拖拽图片文件放到这里",
            dropZoneClickTitle: "或者点击此区域添加图片",
            uploadAsync: true, //默认异步上传
            showUpload: true, //是否显示上传按钮
            showRemove: true, //显示移除按钮
            showPreview: true, //是否显示预览
            showCaption: false,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式
            dropZoneEnabled: true,//是否显示拖拽区域
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            maxFileSize: 2000,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 10, //表示允许同时上传的最大文件个数
            enctype: \'multipart/form-data\',
            validateInitialCount: true,
            previewFileIcon: "<i class=\'glyphicon glyphicon-king\'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！"
 }).on("filebatchselected", function (event, files) {
            $(this).fileinput("upload");
 })
 .on("fileuploaded", function (event, data) {
          if (data.response) {
               var picdir = data.response;
               $("#idcard_front").val(picdir);
       }
  });

说明一下：引入汉化包没有生效，mmp!!! 自己汉化吧！

后台处理代码：

public function uploadimg(Request $request)
    {
        if($request->isMethod(\'post\'))
        {

            $file =  $request->file(\'idcard_front\');
            if($file){
                $extension = $file -> guessExtension();
                $newName = str_random(18).".".$extension;
                $file -> move(base_path().\'/public/storage/uploads\',$newName);
                $idCardFrontImg = \'/upload/file/\'.$newName;
                return json_encode($idCardFrontImg);
            }else{
                $idCardFrontImg = \'\';
                return json_encode($idCardFrontImg);
            }
        }
    }

暂时做个备份，仅供参考！多多交流！