Bootstrap-fileinput-master指令碼正確卻顯示不出正確結果
阿新 • • 發佈:2019-02-11
執行環境:xp系統、谷歌瀏覽器
跟著demo學著使用這個控制元件,老老實實在head裡寫了
$("#file-1").fileinput({
uploadUrl: '#', // you must set a valid URL here else you will get an error
allowedFileExtensions : ['jpg', 'png','gif'],
overwriteInitial: false,
maxFileSize: 1000,
maxFilesNum: 10 ,
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
結果出現的是預設的顯示效果,如下:
到底是哪裡出了問題呢?對的,是我馬大哈了,我把指令碼寫在標籤宣告的前頭了,很遺憾,這種錯誤控制檯不報錯。只要把指令碼寫在下面就好了,像這樣(以下是程式碼片段):
<div class="form-group">
<label for="training_address" class="col-xs-2 col-sm-2 control-label">上傳附件</label>
</div class="form-group">
<div>
<input id="file-1" type="file" multiple class="file" data-overwrite-initial ="false" data-min-file-count="1">
<br>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</div>
</div>
</body>
<script type="text/javascript">
$("#file-1").fileinput({
language: 'zh', //設定語言
showUpload: false,
maxFileCount: 1,
uploadUrl: '#', // you must set a valid URL here else you will get an error
overwriteInitial: false,
maxFileSize: 10000,
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function(filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
</script>
</html>
所以在學習新的控制元件的時候一定要認真閱讀它給的examples,對應控制元件的id檢視相應原始碼以及指令碼,如下圖:
祝大家程式設計愉快,沒有bug~