1. 程式人生 > >Bootstrap-fileinput-master指令碼正確卻顯示不出正確結果

Bootstrap-fileinput-master指令碼正確卻顯示不出正確結果

執行環境: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~