欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Bootstrap FileInput上传控件

程序员文章站 2022-03-24 21:21:10
...

首先需要下载好对应的压缩包，下载地址：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整理

https://blog.csdn.net/u012526194/article/details/69937741

上一篇： MySQL事务回滚演示详解

下一篇： MySQL快速入门之基本操作

推荐阅读