首先需要下载好对应的压缩包，下载地址：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>
初始化设置Script代码，这是常见的设置
$("#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>异步地址，返回输出json信息
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']) );
}
}imageUpload方法，使用的Thinkphp文件上传，自己写文件上传方法也可以！
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整理
