1.下载bootstrap-inputfile下载地址:https://github.com/kartik-v/bootstrap-fileinput
2.上传实例地址:http://plugins.krajee.com/file-input-ajax-demo/1
现在我们开始使用插件
(1)首先引入文件
<!--css文件-->
<link href="__PUBLIC__/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<link href="__PUBLIC__/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<!--js文件-->
<script src="__PUBLIC__/js/jQuery.min.js" type="text/JavaScript"></script>
<script src="__PUBLIC__/js/bootstrap.min.js?v=3.3.6"></script>
<script src="__PUBLIC__/js/plugins/fileinput.js" type="text/javascript"></script>
<script src="__PUBLIC__/js/fileinput.min.js" type="text/javascript"></script>
(2)初始化控件
<input id="file" name="file_data[]" type="file" multiple data-preview-file-type="any" data-show-caption="true">
data-preview-file-type="any" :设置之后可以上传多个文件
name="file_data[]" :因为要上传多个文件所以要用数组
(3)js初始化控件
$("#file").fileinput({
uploadUrl: "{:U('Admin/Img/imgupload2')}",// 上传路径
uploadAsync: false,//是否异步传输
maxFileCount: 5//最大文件上传数量
}).on('filebatchpreupload', function(event, data, id, index) {
}).on('filebatchuploadsuccess', function(event, data) {//上传成功从服务器端返回的数据(即保存的文件名称)
for(var i=0;i<data.response.length;i++){
alert(data.response[i].flag);
}
});
(4)thinkphp对应的方法
public function imgupload2(){
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 3145728 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath = './Public/Uploads/';// 设置附件上传根目录
$upload->savePath = ''; // 设置附件上传(子)目录
$info = $upload->upload(array($_FILES['file_data'])); // 上传文件
$i=0;
if(!$info) {// 上传错误提示错误信息
$this->ajaxReturn($a,'JSON');
}else{// 上传成功 获取上传文件信息
foreach($info as $file){
$a[$i]['flag']=$file['savepath'].$file['savename'];
$i++;
}
}
$this->ajaxReturn($a,'JSON');
}