本来是准备学习bootstrap的,想写个文件上传的demo,但是百度了半天,最终也没有找到想要的内容,现在把学习过程中的资料纪录一下,以便使用:
js下载: 地址是:https://github.com/kartik-v/bootstrap-fileinput/
这个网站提供了很多的DEMO:http://plugins.krajee.com/file-input/demo
从这里下载就可以了,接下来在页面中添加一个js引用和对应的内容:
主要是CSS和JS的引用:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta name="Keywords" content="Server monitor,python web, flask redis, flask http" />
<meta name="Description" content="Redis Monitor: a python flask server monitor project, include redis and http server." />
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>主机管理</title>
<!-- Bootstrap core CSS -->
<link href="/static/res/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/res/css/style.css" rel="stylesheet">
<link href="/static/res/lib/fileupload/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="/static/res/favicon.ico"/>
<link rel="bookmark" href="/static/res/favicon.ico"/>
<title>DashBoard</title>
</head>
<body>
<div class="container kv-main">
<div class="page-header">
<h2>Bootstrap File Input Example </h2>
</div>
<form enctype="multipart/form-data" method="post" action="/upload" id="uploadForm">
<input id="file-0a" class="file" type="file" name="image_file" multiple data-min-file-count="1">
<br>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
<div id="kv-error-1" style="margin-top:10px;display:none"></div>
<div id="kv-success-1" class="alert alert-success fade in" style="margin-top:10px;display:none"></div>
</div>
{% include "/include/buttom.html" %}
<script src="/static/res/lib/fileupload/js/fileinput.js" type="text/javascript"></script>
<script src="/static/res/lib/fileupload/js/fileinput_locale_zh.js" type="text/javascript"></script>
<script>
$("#file-0a").fileinput({
'allowedFileExtensions' : ['jpg', 'png','gif'],
uploadUrl: "/upload", // server upload action
uploadAsync: true,
showPreview: false,
showUpload : false,
maxFileCount: 1,
elErrorContainer: '#kv-error-1'
});
$("#uploadForm").submit(function(event) {
var formData = new FormData(this);
event.preventDefault();
$.ajax({
url : '/upload',
type : 'POST',
data : formData,
contentType : false,
processData : false,
success : function(data) {
if (data.result == 'success') {
$("#uploadFileDiv").slideToggle("slow");
} else {
alert(data);
}
},
error : function() {
alert("data-error");
}
});
});
</script>
</body>
</html>
fileinput的参数有很多,但网站基本上都没有API的:
allowedFileExtensions | ["jpg", "png", "gif"] | 文件结尾的名字,这个是要显示在一个特别的地方的。 |
uploadUrl: | "/upload", // server upload action | 如果显示上传的按钮的话,这个url是提交的地址。 |
elErrorContainer: | '#kv-error-1' | 错误信息显示地方 |
uploadAsync: | false | 是否异步方式提交 |
showPreview: | false | 是否显示预览框 |
showUpload: | false | 是否显示提交按钮 |
提交方式有两种:
一种是通过他自己提供的方式提交。一种是自己写js代码,这个我觉得比较好控制,所以,demo里就这样写吧。