长江三角洲城市群数据平台（4）-文件上传、下载

在总结这一节之前，对前面所做的工作的界面进行展示。

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