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 id="input-b4b" name="idcard_front" type="file" value="">
                            <input id="idcard_front" 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);
            }
        }
    }

暫時做個備份，僅供參考！多多交流！