Blogger Information
Blog 39
fans 0
comment 2
visits 47370
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
Bootstrap FileInput上传控件
Tlilam的PHP之路
Original
4356 people have browsed it

首先需要下载好对应的压缩包,下载地址: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

Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post