基於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') }); })

貌似。。。沒了。。