问题描述：

   使用bootstrap框架做一个文件上传的表单，有图片有数据。使用的插件是fileinput。

解决办法：

html代码

              1，表单页面
<form action="insert" class="form-horizontal" method="post" enctype="multipart/form-data" >
                  <div class="modal-body">
                       <div class="form-group">
                           <label class="col-xs-2 control-label">账户名称*</label>
                           <div class="col-xs-9">
                                <input type="text" name="account" value="" placeholder="客户的账户名称" class="form-control">
                           </div>
                       </div>
                       <div class="form-group">
                           <label class="col-xs-2 control-label">上传图片*</label>
                                <input id="input-id" type="file" name="file[]" multiple data-show-caption="true">                     
                       </div>
                       <div class="form-group">
                            <button type="submit" class="btn btn-danger">保存</button>
                       </div>
                  </div>
            </div>
        </form>
<script type="text/javascript">
        $(function () {
             initFileInput("input-id");
         })
 
 function initFileInput(ctrlName) {
     var control = $('#' + ctrlName);
     control.fileinput({
         language: 'zh', //设置语言
         // uploadUrl: "insert", //上传的地址
         allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
         //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
         uploadAsync: false, //默认异步上传
         showUpload: false, //是否显示上传按钮
         showRemove : false, //显示移除按钮
         showPreview : true, //是否显示预览
         showCaption: false,//是否显示标题
         browseClass: "btn btn-primary", //按钮样式
         dropZoneEnabled: false,//是否显示拖拽区域
         //minImageWidth: 50, //图片的最小宽度
         //minImageHeight: 50,//图片的最小高度
         //maxImageWidth: 1000,//图片的最大宽度
         //maxImageHeight: 1000,//图片的最大高度
         maxFileSize: 2024,//单位为kb，如果为0表示不限制文件大小
         //minFileCount: 0,
         //maxFileCount: 10, //表示允许同时上传的最大文件个数
         enctype: 'multipart/form-data',
         validateInitialCount:true,
         previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
         msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
         layoutTemplates :{
              // actionDelete:'', //去除上传预览的缩略图中的删除图标
             // actionUpload:'',//去除上传预览缩略图中的上传图片；
             //actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
         },
     }).on('filepreupload', function(event, data, previewId, index) {     //上传中
         var form = data.form, files = data.files, extra = data.extra,
         response = data.response, reader = data.reader;
         console.log('文件正在上传');
     }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
         console.log('文件上传成功！');
     debugger
         console.log('文件上传成功！'+data.response.id);
 
     }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
         console.log('文件上传失败！'+data.id);
 
 
     })
 }


    </script>

 2，展示页面
           {volist name="list" id="vo"}
                        <tr>
                            <td>{$vo.id}</td>
                            <td>{$vo.account}</td>
                            <td>{$vo.imagess}</td>
                    
                        </tr>
             {/volist}            
             {$lists->render()}

php代码

//执行添加表单
    public function insert(){
        $files = request()->file('file');//获取文件的变量
        $data=request()->post();//获取数据的变量
 
        if($files){
            $img_path=ROOT_PATH . 'public' . DS . 'static' . DS . 'home' . DS . 'ygjin'. DS ;
            //循环上传
            // 获取表单上传文件
            foreach($files as $file){
                // 移动到框架应用根目录/public/uploads/ 目录下
                $info = $file->move($img_path);
                $str[] = $info -> getSaveName();//20201212/e38bcd88e1a2b32ef4c9f1a08fb75c7c.png
            }
            $arr['images'] = implode(',',$str); 
            $arr['account']=$data['account'];
            $res = Db::name('yojin') -> insert($arr);
            if($res){
                $this->redirect('index');
            }else{
                $this -> error('添加失败');
            }          
        }else {
            // 上传失败获取错误信息
            return $files->getError();
        }

    }
// 加载列表页面

    public function index(){
        //从数据库获取数据       
        $mms=Db::name('yojin')->order('id','desc')->paginate(15);//分页
        $mm=Db::name('yojin')->order('id','desc')->select();//做循环图片用
        $img_path='/public' . DS . 'static' . DS . 'home' . DS . 'yojin'. DS ;
        foreach ($mm as &$val) {
            $imgArr=explode(',', $val['images']);
            $val['imagess']='';
            for ($i=0; $i < count($imgArr); $i++) {
                $val['imagess'] .="<img style='width:100px' src='".$img_path.$imgArr[$i]."' alt=''>";
            }
        }       
        //分配变量
        $this->assign(["list"=>$mm,"lists"=>$mms]);
        return view();
    }

标签：