在总结这一节之前，对前面所做的工作的界面进行展示。
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
在系统中需要上传下载资料，因此设计了文件上传和下载模块。
1.首先创建disk应用模块。
Paste_Image.png
2.然后对auth中的User模型进行扩展，新建UserProfile模型，要将文件上传至upload，因此对urls要进行设置。
Paste_Image.png
Paste_Image.png
Paste_Image.png
Paste_Image.png
3.编写简单的view，以返回profile.html。
Paste_Image.png
4.新建profile，目录结构如下。
Paste_Image.png
5.profile.html的具体内容如下。
Paste_Image.png
6.改写views，以实现对文件上传的具体逻辑。
Paste_Image.png
7.增加数据上传入口。
Paste_Image.png
8.用bootstrap的文件上传插件对上传功能进行拓展。
{% extends "base.html" %}
{% load staticfiles %}
{% block css %}
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<link href="http://cdn.bootcss.com/bootstrap-fileinput/4.3.5/css/fileinput.min.css" rel="stylesheet">
{% endblock %}
{% block js %}
<script src="http://cdn.bootcss.com/bootstrap-fileinput/4.3.5/js/fileinput.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-fileinput/4.3.5/js/locales/zh.min.js"></script>
{% endblock %}
{% block main %}
<script src={% static 'js/upload.js' %}></script>
<link href={% static 'bootstrap/css/fileinput.min.css' %} media="all" rel="stylesheet" type="text/css" />
<script {% static 'bootstrap/js/fileinput.min.js' %}></script>
<script {% static 'bootstrap/js/fileinput_locale_zh.js' %}></script>
<div class="form-pos">
<form class="form-signin" role="form" method="POST" enctype="multipart/form-data" >
{% csrf_token %}
<fieldset>
<h2 class="form-signin-heading" >请上传</h2>
<p>
<label for="username">用户名</label>
<input class="form-control" type="text" id="username" name="username"/>
</p>
<p>
<label for="headImg">文件</label>
<input type="file" id="headImg" class="file" data-overwrite-initial="false" multiple name="headImg" />
</p>
</fieldset>
</form>
</div>
<p class="pull-right" style="font-size: larger">{{ success }}</p>
js配置代码如下。
$("#headImg").fileinput({
language: 'zh', //设置语言
//uploadUrl: 'media/profile', // you must set a valid URL here else you will get an error
//allowedFileExtensions : ['jpg','png'],
allowedFileExtensions: ['csv', 'txt'],
maxFileSize: 60000000,
maxFilesNum: 10,
//allowedFileTypes: ['image', 'video', 'flash'],
slugCallback: function (filename) {
return filename.replace('(', '_').replace(']', '_');
}
});
9.下载通过js即可实现。
Paste_Image.png
function goto(url){
window.location=url;
}
var url="#"
$('#down_select').on('change',function(){
var checkValue=$("#down_select").val();
console.log(checkValue);
checkValue.replace("//","\\");
url='\\'+'media'+'\\'+checkValue;
console.log(url);
});
$("#down_button").click(function(){goto(url)});
10界面如下，未进行美化。
Paste_Image.png
