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);
            }
        }
    }

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

转载于:https://www.cnblogs.com/guoyachao/p/8124677.html