bootstrap inputfile图片上传神器

最新推荐文章于 2020-05-31 23:39:28 发布

weixin_30379531

最新推荐文章于 2020-05-31 23:39:28 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/jin-zhao/p/6700380.html

版权

背景：使用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>