bootstrap inputfile图片上传神器

背景：使用bootstrap inputfile插件进行图片上传

代码：

<html>
<head>
<meta charset="UTF-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
        <link href="../css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="../js/fileinput.js" type="text/javascript"></script>
        <script src="../js/fileinput_locale_zh.js" type="text/javascript"></script>
        <script src="../js/fileinput_locale_fr.js" type="text/javascript"></script>
        <script src="../js/fileinput_locale_es.js" type="text/javascript"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
<script language="javascript" src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript">
</script>        
</head>
<body>
<div style="margin:50px">
<label class="control-label">Select File</label>
<div style="width:300;">
<input id="pic" name="input2[]" 
 　　　　　　　　 type="file" 
　　　　　　　　　class="file file-loading" 
　　            data-show-upload="false" 
               data-show-caption="true" 
               data-allowed-file-extensions='["png"]' 
               data-language="zh" 
               data-max-file-size="100">
<p class="help-block">格式：png；大小100k</p>
</div>
</div>
</body>
</html>

运行结果：

注意：一定要导入<head></head>中提到的js&css文件

posted @ 2017-04-12 17:36  一昭一弦  阅读(2370)  评论(0)  编辑  收藏  举报