首先需要下载好对应的压缩包,下载地址:https://github.com/kartik-v/bootstrap-fileinput
本人只是简单实用,更多详细的可以再研究一下
<head> <meta charset="UTF-8"/> <link href="./css/bootstrap.min.css" rel="stylesheet"> <script src="./js/jquery-2.0.3.min.js"></script> <script src="./js/bootstrap.min.js" type="text/javascript"></script> <link href="./css/fileinput.css" media="all" rel="stylesheet" type="text/css" /> <script src="./js/fileinput.js" type="text/javascript"></script> <script src="./js/fileinput_locale_zh.js" type="text/javascript"></script> </head>
上三个是必定的因为使用的是bootstrap,下面三个是控件的链接,最好一个是中文的汉化,这就是头部的内容!
<form action="2.php" enctype="multipart/form-data" method="post"> <input id="imgUpload" class="file" name="thumb" type="file" multiple data-min-file-count="1"> <br> <button type="submit" class="btn btn-primary">提交</button> <button type="reset" class="btn btn-default">重置</button> </form>
$("#uploadfile").fileinput({ language: 'zh', //设置语言 uploadUrl:"http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址 allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀 //uploadExtraData:{"id": 1, "fileName":'123.mp3'}, uploadAsync: true, //默认异步上传 showUpload:true, //是否显示上传按钮 showRemove :true, //显示移除按钮 showPreview :true, //是否显示预览 showCaption:false,//是否显示标题 browseClass:"btn btn-primary", //按钮样式 dropZoneEnabled: false,//是否显示拖拽区域 //minImageWidth: 50, //图片的最小宽度 //minImageHeight: 50,//图片的最小高度 //maxImageWidth: 1000,//图片的最大宽度 //maxImageHeight: 1000,//图片的最大高度 //maxFileSize:0,//单位为kb,如果为0表示不限制文件大小 //minFileCount: 0, maxFileCount:10, //表示允许同时上传的最大文件个数 enctype:'multipart/form-data', validateInitialCount:true, previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>", msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!", }).on("fileuploaded", function (event, data, previewId, index){ //返回判断操作 });
$("#imgUpload").fileinput({ language: 'zh', uploadUrl: "/admin.php?a=ajaxuploadimage", dropZoneEnabled: false, autoReplace: true, maxFileCount: 1, allowedFileExtensions: ["jpg","jpeg", "png", "gif"], browseClass: "btn btn-primary", //按钮样式 previewFileIcon: "<i class='glyphicon glyphicon-king'></i>" }) .on("fileuploaded", function (e, data) { var res = data.response; if (res.state > 0) { //异步上传,返回来的值添加到隐藏的input里面提交上去一起处理 $("#file_upload_image").attr('value',res.path); alert(res.msg+'上传成功'); //上传后路径 // alert(res.path); } else { alert(res.msg+'上传失败') } }) </script>
public function ajaxuploadimage() { $upload = D("UploadImage"); //图片 $res = $upload->imageUpload(); if ($res === false || !is_array($res)) { echo json_encode( $result = array( 'state' => 0 , 'msg'=>$res['msg'] ) ); }else{ echo json_encode( $result = array( 'state' => 1, 'msg'=>$res['msg'], 'path'=>$res['res']) ); } }
private $_uploadObj = ''; private $_uploadImageData = ''; const UPLOAD = 'upload'; public function __construct() { $this->_uploadObj = new \Think\Upload(); $this->_uploadObj->rootPath = './'.self::UPLOAD.'/'; $this->_uploadObj->subName = 'temp'; } public function imageUpload(){ $res = $this->_uploadObj->upload(); if ($res) { return $res = array( 'res' =>$imgpath, 'msg' =>'附带信息' ); }else{ return false; } }
Bootstrap FileInput中文API整理