bootstrap中fileinput插件回调数据的问题

Question

各位大侠，我想使用thinkphp3.2.3和boostrap的fileinput插件实现一个上传文件的功能，如下图： 我的想法是点击确认提交的时候，上传的文件先到后台将文件地址保存到附件信息数据表中，返回一个记录id值，id值保存在前端hidden隐藏域，然后再把附件的其他信息和记录id值再更新一边数据表的值。但发现第一步隐藏域就接收不到id值。上网也查了好多资料，各种参数都反复测试过了，还是在前端隐藏域接收不到id值，各位看看怎么回事？？？？前端代码如下：<input type="text" name="ziyuan_name" value="" placeholder="附件的名称" id="ziyuan_name">选择上传文件：<input type="file" name="uploadfile" id="uploadfile" multiple class="file-loading" /><input type="hidden" value="" id="ziyuan_id" /><button class="btn btn-primary" id="create_ziyuan_submit">确认提交</button> $("#uploadfile").fileinput({ uploadUrl: "{:U('Dongzuo/uploading')}", //上传的地址 uploadAsync:false, //true同步上传，false异步上传，**我都试过了** showUpload: false, //是否显示上传按钮 showPreview : false, //是否显示预览 maxFileCount: 1, //表示允许同时上传的最大文件个数 enctype: 'multipart/form-data', validateInitialCount:true, }).on("fileuploaded", function(event, data, previewId, index) {$("#ziyuan_id").val(data.response.id);}); //下一步接收隐藏域中的id值和其他文本域信息在通过post方法传到后台 $('#create_ziyuan_submit').on('click',function(){ $("#uploadfile").fileinput("upload"); var $ziyuan_id=$("#ziyuan_id").val(); var $ziyuan_name=$("#ziyuan_name").val(); $.post('{:U('Dongzuo/add_ziyuan')}', {ziyuan_id:$ziyuan_id,ziyuan_name: $ziyuan_name}, function(data){。。。}}); //后台代码： public function uploading() { $upload = new \Think\Upload();// 实例化上传类 $upload->rootPath = './'; // 设置附件上传根目录 $upload->savePath = 'Public/upload_fujian/'; // 设置附件上传根目录 $upload->autoSub = false; $info = $upload->uploadOne($_FILES['uploadfile']); $data['dizhi'] = $info['savename']; $ziyuan = D('ZiyuanInfo'); if ($id=$ziyuan->add($data)){$ajaxdata['id']=$id;} else{...} $this->ajaxReturn($ajaxdata); } public function add_ziyuan() { $ziyuan = D('ZiyuanInfo'); $ziyuan_id=I('ziyuan_id'); if ($ziyuan_id){ $ziyuan_name=I('ziyuan_name'); $condition['ziyuan_id']=$ziyuan_id; $yn=$ziyuan->where($condition)->save($data); if($yn){$ajaxdata['status']=0;} else{$ajaxdata['status']=2;} } else{$ajaxdata['status']=1;} $this->ajaxReturn($ajaxdata); }

Answer 1

以前用过这个插件，研究了一下，你是要上传的同时还要提交其他参数吧，其实可以全部同时上传的，给你一个参数设置，你的id可以放在uploadExtraData里

                control.fileinput({
                    language: 'zh', //设置语言
                    uploadUrl: uploadUrl, //上传的地址
                    allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
                    showUpload: true, //是否显示上传按钮
                    showCaption: false,//是否显示标题
                    uploadAsync: false, //设置上传同步异步 此为同步 
                    browseClass: "btn btn-primary", //按钮样式     
                    //dropZoneEnabled: false,//是否显示拖拽区域
                    //minImageWidth: 50, //图片的最小宽度
                    //minImageHeight: 50,//图片的最小高度
                    //maxImageWidth: 1000,//图片的最大宽度
                    //maxImageHeight: 1000,//图片的最大高度
                    //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
                    //minFileCount: 0,
                    maxFileCount: 15, //表示允许同时上传的最大文件个数
                    uploadExtraData:{
                        aaa:1111        //上传时要传输的其他参数
                    },
                    enctype: 'multipart/form-data',
                    validateInitialCount:true,
//                    slugCallback:function(filename){
//                    _uploadBatch
//                    },
                    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                    msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                });
        };

php接收返回

<?php
 echo json_encode(array('file'=>$_FILES,'request'=>$_REQUEST));
?>

当然做上传功能的话我比较推荐自己写，用formdata上传，有兴趣的话可以参考参考我的博客链接

Answer 2

应该有个success回调函数，在里面可以接收上传成功回调的值的

Answer 3

谢谢大家，我查了相关资料，这个插件的返回结果只能用js方法来处理，不能用jquery来处理。

Answer 4

标准接收上传完成服务器回调的方式是:

$('#file').fileinput({

}).on('filebatchuploadsuccess', function(event,data){
    data.response
})