基于bootstrap的fileinput插件实现上传

用户头像上传的Demo

1.引入文件css文件

<link rel="stylesheet" href="../../libs/bootstrap-3.3.7/css/bootstrap.min.css"><!--引入bootstrap的css文件-->
<link rel="stylesheet" href="../../libs/bootstrap-fileinput-master/css/fileinput.min.css"><!--引入fileinput插件的css文件-->
<link rel="stylesheet" href="../css/index.css"><!--自己的css文件-->

2.引入js文件

<script src="../../libs/jq/jquery-1.11.3.js"></script><!--引入jq文件-->
<script src="../../libs/bootstrap-3.3.7/js/bootstrap.min.js"></script><!--引入bootstrap的js文件-->
<script src="../../libs/bootstrap-fileinput-master/js/fileinput.min.js"></script><!--引入fileinput插件js文件-->
<script src="../../libs/bootstrap-fileinput-master/js/locales/zh.js"></script><!--引入中文文件-->

3.页面布局

<form class="form form-vertical" id="userImgUploadForm" action="#" method="post" enctype="multipart/form-data">

    <div class="row" style="margin:0">
        <div class="col-lg-3 col-md-3 col-xs-12 col-sm-4">
            <div class="kv-avatar center-block text-center" style="width:200px;">
                <input id="avatar-1" name="image" type="file" class="file-loading" required>
                <div class="help-block"><small>选择头像文件</small></div>
            </div>
        </div>
        <div class="col-sm-8">
            <div class="row">
                <h1>这里是表单信息</h1>
            </div>
            <div class="form-group">
                <hr>
                <div class="text-right">
                    <button type="button" class="btn btn-primary uploadUserimg">Submit</button>
                </div>
            </div>
        </div>
    </div>
</form>
<div id="kv-avatar-errors-1" class="center-block" style="width:800px;display:none"></div>

 

4.js代码

var btnCust = \'<button type="button" class="btn btn-default" title="Add picture tags" \' +
        \'onclick="alert(\\'Call your custom code here.\\')">\' +
        \'<i class="glyphicon glyphicon-tag"></i>\' +
        \'</button>\';
    $("#avatar-1").fileinput({
        language:\'zh\',//设置插件的语言
        overwriteInitial: true,
        maxFileSize: 1500,//最大文件限制
        showClose: false,
        showCaption: false,
        browseLabel: \'\',
        removeLabel: \'\',
        browseIcon: \'<i class="glyphicon glyphicon-folder-open"></i>\',
        removeIcon: \'<i class="glyphicon glyphicon-remove"></i>\',
        removeTitle: \'Cancel or reset changes\',
        elErrorContainer: \'#kv-avatar-errors-1\',
        msgErrorClass: \'alert alert-block alert-danger\',
        defaultPreviewContent: \'<img src="../img/default-user-image.png" alt="Your Avatar" style="width:160px">\',
        layoutTemplates: {main2: \'{preview} \' +  btnCust + \' {remove} {browse}\'},
        allowedFileExtensions: ["jpg", "png", "gif"]//上传文件类型设置
    });

    $(\'.uploadUserimg\').click(function () {
　　　　//点击上传按钮，new一个FormData对象
        var formData1 = new FormData();
　　　　//对象中加入传入的文件，键 为input 的name ，便于后台获取
        formData1.append(\'image\', $(\'#avatar-1\')[0].files[0]);
        $.ajax({
            url: \'http://192.168.0.133:8888/upload\',//服务器的上传地址
            type: \'POST\',
            cache: false,//上传图片不需要缓存
            data: formData1,
            processData: false,//不需要对数据进行处理
            contentType: false,
            success:function (result) {
                console.log(result)//后台返回的数据
　　　　　　　　　　//do somethings
            }
        }).done(function(res) {
            console.log(res)
        }).fail(function(res) {
            console.log(res)
            console.log(\'err\')
        });
    })

貌似。。。没了。。