背景:使用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文件