上傳文件插件-bootstrap-fileinput

1. js文件：

<link href="/bootstrap/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="/bootstrap/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>

    <script src="/js/bootstrap/jquery-2.1.4.min.js"></script>

    <!--<script src="/bootstrap/js/locales/fr.js" type="text/javascript"></script>-->
    <!--<script src="/bootstrap/js/locales/es.js" type="text/javascript"></script>-->

    <script src="/bootstrap/js/fileinput.js" type="text/javascript"></script>
    <script src="/bootstrap/themes/fa/theme.js" type="text/javascript"></script>

 

2. demo

<!--修改頭像-->
<div id="updateImgDialog">
    <form enctype="multipart/form-data" method="post" action="/user/uploadHeadImg">
        <div class="form-group">
            <div class="file-loading">
                <input id="file-4" name="img" type="file" class="file">
                <p class="help-block">支持jpg、jpeg、png、gif格式，大小不超過2.0M</p>
            </div>
        </div>
    </form>
</div>

<script> $("#file-4").fileinput({ theme: "explorer", //主題  language: 'zh', uploadUrl: "/user/uploadHeadImg",// 上傳請求路徑  allowedFileExtensions: ['jpg', 'gif', 'png', 'jpeg', 'pdf'],//容許上傳的文件後綴  uploadAsync: false, //是否容許異步上傳  showUpload: false,//是否顯示上傳按鈕  showCaption: false,//是否顯示容器dropZoneEnabled: false,//是否顯示拖拽區域  removeFromPreviewOnError: true,//是否移除校驗文件失敗的文件  uploadExtraData: function (previewId, index) { //額外參數 返回json數組 return { 'id': 1 // <span style="font-family:Arial, Helvetica, sans-serif;">commId 爲全局變量，能夠給控件上傳額外參數 </span>  }; }, layoutTemplates: { //取消上傳按鈕  actionUpload: '', }, showPreview: true, //顯示預覽  minFileCount: 1, //最低文件數量  maxFileCount: 1, //最多文件數量  maxFileSize: 512, //容許文件上傳大小  overwriteInitial: true, previewFileIcon: '<i class="fa fa-file"></i>', initialPreviewAsData: true, // defaults markup  preferIconicPreview: false, // 是否優先顯示圖標 false 即優先顯示圖片  previewFileIconSettings: { // configure your icon file extensions 'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>', 'jpg': '<i class="fa fa-file-photo-o text-danger"></i>', 'gif': '<i class="fa fa-file-photo-o text-muted"></i>', 'png': '<i class="fa fa-file-photo-o text-primary"></i>', 'jpeg': '<i class="fa fa-file-photo-o text-primary"></i>' }, }); $("#file-4").fileinput(); $("#file-4").on("filebatchuploadsuccess", function (event, data, previewId, index) { if (data.response == true) { alert("上傳成功") imgDialog.close() } var result = data.response.result;//接收後臺返回的數據 // console.log(data) // console.log(previewId) // console.log(index) // $.each(result, function (i, item) //each函數會遍歷從後臺返回的錯誤信息 // { // if (item.error != null) { abp.message.warn(item.error); return; } // }); // $("#input-ke-2").fileinput('reset'); //重置上傳控件（清空已文件） // abp.notify.info("提交成功");  }); </script>