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">Submitbutton>
                <button type="reset" class="btn btn-default">Resetbutton>
            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~