Bootstrap-fileinput-master脚本正确却显示不出正确结果

最新推荐文章于 2019-04-17 09:32:50 发布

恒宝乐园

最新推荐文章于 2019-04-17 09:32:50 发布

阅读量3k

点赞数 1

分类专栏： # JavaScript 文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/hengbao4/article/details/52812771

版权

JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

运行环境：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查看相应源码以及脚本，如下图：

这里写图片描述