Form表单上传文件

修改 views.py

  1. import os
  3. def upload(request):
  4.     if request.method == 'GET':
  5.         img_list = models.Img.objects.all()
  6.         return render(request, 'upload.html', {'img_list': img_list})
  7.     elif request.method == 'POST':
  8.         name = request.POST.get('user')
  9.         obj = request.FILES.get('fafafa')
  11.         # 保存上传的文件
  12.         file_path = os.path.join('static', 'upload', obj.name)
  13.         f = open(file_path, 'wb')
  14.         for chunk in obj.chunks():
  15.             f.write(chunk)
  16.         f.close()
  18.         models.Img.objects.create(path=file_path)
  20.         # 返回并刷新页面
  21.         return redirect('upload.html')

修改 models.py

  1. class Img(models.Model):
  2.     path = models.CharField(max_length=128)

在 templates 下添加 upload.html 文件，内容如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.     <form method="post" action="/upload.html" enctype="multipart/form-data">
  9.         <input type="text" name="user" />
  10.         <input type="file" name="fafafa" />
  11.         <input type="submit" value="提交" />
  12.     </form>
  14.     <div>
  15.         {% for item in img_list %}
  16.             <img style="height: 200px; width: 200px;" src="/{{ item.path }}">
  17.         {% endfor %}
  18.     </div>
  20. </body>
  21. </html>

修改 urls.py

  1. # 添加
  2. re_path('upload.html', views.upload),

重新生成数据库

  1. python manage.py makemigrations
  2. python manage.py migrate



Ajax 上传文件

修改 upload.html 文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .container img{
  8.             width: 200px;
  9.             height: 200px;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <div class="container" id="imgs">
  15.         {% for img in img_list %}
  16.             <img src="/{{ img.path }}">
  17.         {% endfor %}
  19.     </div>
  20.     <input type="file" id="img" />
  21.     <input type="button" value="提交XML" onclick="UploadXML()" />
  22.     <input type="button" value="提交JQ" onclick="Uploadjq()" />
  24. <script src="/static/jquery.min.js"></script>
  25. <script>
  26.     function UploadXML() {
  27.         var dic = new FormData();             // 通过FormData构造函数创建一个空对象
  28.         dic.append('user', 'v1');             // 通过append()方法在末尾追加 key 为 user 值为 v1 的数据
  29.         dic.append('fafafa', document.getElementById('img').files[0]);
  31.         var xml = new XMLHttpRequest();
  32.         xml.open('post', '/upload.html', true); // 参数说明: 请求方式；请求路径；是否异步处理，true为异步
  33.         xml.onreadystatechange = function () {  // readyState 改变时触发
  34.             if(xml.readyState == 4){            // xml.readyState: XMLHttpRequest对象的状态，等于4表示数据已经接收完毕。
  35.                 var obj = JSON.parse(xml.responseText);   // responseText 服务器接收到的响应体（不包括头部）
  36.                 if(obj.status){
  37.                     var img = document.createElement('img');  // 创建一个元素
  38.                     img.src = "/"+obj.path;
  39.                     document.getElementById('imgs').appendChild(img);
  40.                 }
  41.             }
  43.         };
  44.         xml.send(dic);  // 发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
  45.     }
  47.     function Uploadjq() {
  48.         var dic = new FormData();
  49.         dic.append('user', 'v1');
  50.         dic.append('fafafa', document.getElementById('img').files[0]);
  52.         $.ajax({
  53.             url: 'upload.html',
  54.             type: 'POST',
  55.             data: dic,
  56.             processData: false,            // jQuery不要去处理发送的数据
  57.             contentType: false,            // jQuery不要去设置Content-Type请求头
  58.             dataType: 'JSON',
  59.             success: function (arg) {   // 响应的数据是 arg
  60.                 if(arg.status){
  61.                     var img = document.createElement('img');
  62.                     img.src = "/" + arg.path;
  63.                     $('#imgs').append(img);
  64.                 }
  65.             }
  66.         })
  68.     }
  69. </script>
  71. </body>
  72. </html>

修改 views.py 文件

  1. import os
  2. import json
  4. def upload(request):
  5.     if request.method == 'GET':
  6.         img_list = models.Img.objects.all()
  7.         return render(request, 'upload.html', {'img_list': img_list})
  8.     elif request.method == 'POST':
  9.         user = request.POST.get('user')
  10.         obj = request.FILES.get('fafafa')
  12.         file_path = os.path.join('static', 'upload', obj.name)
  13.         f = open(file_path, 'wb')
  14.         for chunk in obj.chunks():
  15.             f.write(chunk)
  16.         f.close()
  18.         models.Img.objects.create(path=file_path)
  19.         ret = {'status': True, 'path': file_path}             # 返回响应数据是字典
  21.         return HttpResponse(json.dumps(ret))

基于iframe实现form上传文件

修改 upload.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .container img{
  8.             width: 200px;
  9.             height: 200px;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <!--
  15.     <h1>测试Iframe功能</h1>
  16.     <input type="text" id="url" />
  17.     <input type="button" value="点我" onclick="iframeChange();" />
  18.     <iframe id="ifr" src=""></iframe>
  19.     <hr/>
  20.     -->
  21.     <h1>基于iframe实现form提交</h1>
  22.     <!-- 表单提交的 target 为 iframe_2 -->
  23.     <form action="/upload.html" method="post" target="iframe_2" enctype="multipart/form-data">
  24.         <!-- onload 事件的用处: 当页面载入完毕后执行Javascript代码 -->
  25.         <iframe style="display: none" id="iframe_1" name="iframe_2" src="" onload="loadIframe();"></iframe>
  26.         <input type="text" name="user" />
  27.         <input type="file" name="fafafa" />
  28.         <input type="submit" />
  29.     </form>
  31.     <div class="container" id="imgs">
  32.         {% for img in img_list %}
  33.             <img src="/{{ img.path }}">
  34.         {% endfor %}
  36.     </div>
  37.     <input type="file" id="img" />
  38.     <input type="button" value="提交XML" onclick="UploadXML()" />
  39.     <input type="button" value="提交JQ" onclick="Uploadjq()" />
  41. <script src="/static/jquery.min.js"></script>
  42. <script>
  43.     function UploadXML() {
  44.         var dic = new FormData();
  45.         dic.append('user', 'v1');
  46.         dic.append('fafafa', document.getElementById('img').files[0]);
  48.         var xml = new XMLHttpRequest();
  49.         xml.open('post', '/upload.html', true);
  50.         xml.onreadystatechange = function () {
  51.             if(xml.readyState == 4){
  52.                 var obj = JSON.parse(xml.responseText);
  53.                 if(obj.status){
  54.                     var img = document.createElement('img');
  55.                     img.src = "/"+obj.path;
  56.                     document.getElementById('imgs').appendChild(img);
  57.                 }
  58.             }
  60.         };
  61.         xml.send(dic);
  62.     }
  64.     function Uploadjq() {
  65.         var dic = new FormData();
  66.         dic.append('user', 'v1');
  67.         dic.append('fafafa', document.getElementById('img').files[0]);
  69.         $.ajax({
  70.             url: 'upload.html',
  71.             type: 'POST',
  72.             data: dic,
  73.             processData: false,
  74.             contentType: false,
  75.             dataType: 'JSON',
  76.             success: function (arg) {
  77.                 if(arg.status){
  78.                     var img = document.createElement('img');
  79.                     img.src = "/" + arg.path;
  80.                     $('#imgs').append(img);
  81.                 }
  82.             }
  83.         })
  85.     }
  87.     function iframeChange() {
  88.         var url = $('#url').val();
  89.         $('#ifr').attr('src', url);
  90.     }
  92.     function loadIframe() {
  93.         var str_json = $('#iframe_1').contents().find('body').text(); //根据view.py 的定义，服务端返回的内容为：{"status": true, "path": "static\\upload\\1.png"}
  94.         var obj = JSON.parse(str_json);
  95.         if (obj.status){
  96.             var img = document.createElement('img');
  97.             img.src = "/" + obj.path;
  98.             $('#imgs').append(img);
  99.         }
  100.     }
  101. </script>
  103. </body>
  104. </html>

Django 练习班级管理系统八 -- 上传文件的更多相关文章

  1. django 基于form表单上传文件和基于ajax上传文件

    一.基于form表单上传文件 1.html里是有一个input type="file" 和 ‘submit’的标签 2.vies.py def fileupload(request ...

  2. Django和Ueditor自定义存储上传文件的文件名

    django台后默认上传文件名 在不使用分布式文件存储系统等第三方文件存储时,django使用默认的后台ImageField和FileField上传文件名默认使用原文件名,当出现同名时会在后面追加下随 ...

  3. django + dropzone.js 上传文件

    1.dropzone.js http://www.dropzonejs.com/ dropzone.js是一个可预览\可定制化的文件拖拽上传,实现AJAX异步上传文件的工具 2.dropzone.js ...

  4. Django session cookie 上传文件、详解

    session 在这里先说session 配置URL from django.conf.urls import patterns, include, url from django.contrib i ...

  5. 4 django系列之HTML通过form标签来同时提交表单内容与上传文件

    preface 我们知道提交表单有2种方式,一种直接通过submit页面刷新方法来提交,另一种通过ajax异步局部刷新的方法提交,上回我们说了通过ajax来提交文件到后台,现在说说通过submit来提 ...

  6. (转)django上传文件

    本文转自:http://www.cnblogs.com/linjiqin/p/3731751.html 另:  本文对原文做了适当修改 更为详细的介绍可以参考官方文档. emplate html(模板 ...

  7. django上传文件

    template html(模板文件): <form enctype="multipart/form-data" method="POST" action ...

  8. 使用django表单，使网页添加上传文件，并分析文件。

    开发环境是: apache + python + django+ eclipse(开发环境) 欲达到目的: 在网页上,添加上传文件控件.然后读取csv文件,并分析csv文件. 操作步骤: django ...

  9. 实现简单的django上传文件

    本文用django实现上传文件并保存到指定路径下,没有使用forms和models,步骤如下: 1.在模板中使用form表单,因为这个表单使用于上传文件的,所以method属性必须设置为post,而且 ...

随机推荐

  1. tcp粘包、解决粘包问题

    目录 subproess模块 TCP粘包问题 粘包两种情况 解决粘包问题 struct模块的使用 使用struct模块解决粘包 优化解决粘包问题 上传大文件 服务端 客户端 UDP协议 upd套接字 ...

  2. Linux的启动过程的分析

    Linux的启动过程 Linux系统从启动大哦提供服务的基本过程为:首先机器家电,然后通过MBR或者UEFI装载GRUB,再启动内核,再由内核启动服务,最后开始对外服务 CentOS7要经历四个主要阶 ...

  3. fiddler---Fiddler抓取https协议

    上一篇简单的介绍了Fiddler的使用方法和页面布局介绍,Fiddler默认抓取的是HTTP协议,现在的协议基本上都是基于HTTPS协议的,今天写一篇如何通过Fiddler抓取HTTPS协议 什么是H ...

  4. linux下查看程序占用多少内存

    执行 ps auxVSZ(或VSS)列 表示,程序占用了多少虚拟内存:RSS列 表示, 程序占用了多少物理内存:虚拟内存可以不用考虑,它并不占用实际物理内存. 或执行top 命令 VIRT(或VSS) ...

  5. 【洛谷P2494】 [SDOI2011]保密（分数规划+最小割）

    洛谷 题意: 题意好绕好绕...不想写了. 思路: 首先类似于分数规划做法,二分答案得到到每个点的最小危险度. 然后就是在一个二分图中,两边撤掉最少的点(相应代价为上面算出的危险度)及相应边,使得中间 ...

  6. PHP连接Navicat For Mysql并取得数据

    Navicat For Mysql中新建数据库 数据库中新建表 保存表 表中添加数据 打开ide,输入以下php代码,使用localhost打开该php文件 <?php // ip地址.用户名. ...

  7. C++学习五 const vector<int>类型的迭代器使用

    一情景: 算法功能:对于传入的vector, 能够找到两个数字,使其相加之和为target,然后返回这两个数字的位置(也就是秩) 最开始是这样的一个问题: 对于一个传入的const vector< ...

  8. Markdown & LaTex 常用语法

    目录 blog 的目录 博客园自带目录 用 javascript 自定义目录 主标题 副标题 h1,一级标题 h2,二级标题 h3,三级标题 注释 常用的符号及文本形式 如果你想在markdown中文 ...

  9. 文件名工具类 MoFileNameUtil

    文件名工具类 MoFileNameUtil MoFileNameUtil public class MoFileNameUtil { //不包含点号 public static String getF ...

  10. Vue 变异方法unshift&pop&shift

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...