首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Python

Python Web框架之Django框架文件上传功能详解

Posted in Python onAugust 16, 2019

本文实例讲述了Python Web框架之Django框架文件上传功能。分享给大家供大家参考，具体如下：

上传方式：

- Form表单上传文件
- Ajax上传文件
- 基于form表单和iframe自己实现ajax请求

1，创建项目

Python Web框架之Django框架文件上传功能详解

2，settings配置（注册app01，static路径等等这些）及url添加（略过）

3，views视图函数

form的视图收到了在request.FILES中的文件数据。从上述form来的数据可以通过request.FILES['file']来存取。

特别注意的是，只有当request方法是POST，且发送request的<form>有属性enctype="multipart/form-data"时，request.FILES中包含文件数据，否则request.FILES为空。

from django.shortcuts import render,redirect,HttpResponse
from app01 import models
import json
import os
def upload(request):
  if request.method == 'GET':
    img_list = models.Img.objects.all()
    return render(request,'upload.html',{'img_list': img_list})
  elif request.method == "POST":
    user = request.POST.get('user')
    fafafa = request.POST.get('fafafa')
    obj = request.FILES.get('fafafa')
    # print(obj.name,obj.size) #读取文件名称和大小，返回后台
    # print(user,fafafa)
    file_path = os.path.join('static','upload',obj.name)
    f = open(file_path, 'wb')
    for chunk in obj.chunks():
      f.write(chunk)
    f.close()
    models.Img.objects.create(path=file_path)
    ret={'status':True,'path':file_path}
    return HttpResponse(json.dumps(ret))

4，文件操作方法

obj.read()：从文件中读取整个上传的数据，这个方法只适合小文件；

obj.chunks()：按块返回文件，通过在for循环中进行迭代，可以将大文件按块写入到服务器中；

obj.multiple_chunks()：这个方法根据myFile的大小，返回True或者False，当myFile文件大于2.5M(默认为2.5M，可以调整)时，该方法返回True，否则返回False，因此可以根据该方法来选择选用read方法读取还是采用chunks方法

obj.name：这是一个属性，不是方法，该属性得到上传的文件名，包括后缀，如123.exe；

obj.size：这也是一个属性，该属性得到上传文件的大小。

5.1 form 上传

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <form method="POST" action="/upload.html" enctype="multipart/form-data">
    <input type="text" name="user" />
    <input type="file" name="fafafa" />
    <input type="submit" value="提交" />
  </form>
  <div>
    {% for item in img_list %}
      <img style="height: 200px;width: 200px;" src="/{{ item.path }}" />
    {% endfor %}
  </div>
</body>
</html>

5.2 原生的ajax Http请求上传文件方法

涉及到两个对象FormData和XMLHttpRequest

利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个"表单".比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件.

XMLHttpRequest 是一个API, 它为客户端提供了在客户端和服务器之间传输数据的功能。它提供了一个通过 URL 来获取数据的简单方式，并且不会使整个页面刷新。这使得网页只更新一部分页面而不会打扰到用户。XMLHttpRequest 在 AJAX 中被大量使用。

XMLHttpRequest 是一个 JavaScript 对象，它最初由微软设计,随后被 Mozilla、Apple 和 Google采纳. 如今,该对象已经被 W3C组织标准化. 通过它,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML, 但 XMLHttpRequest 可以取回所有类型的数据资源，并不局限于XML。 而且除了HTTP ,它还支持file 和 ftp 协议.

语法var myRequest = new XMLHttpRequest();

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .container img{
      width:200px;
      height:200px;
    }
  </style>
</head>
<body>
  <div class="container">
    {% for img in img_list %}
      <img src="/{{ img.path }}">
    {% endfor %}
  </div>
  <input type="file" id="imgs" />
  <input type="button" value="提交" onclick="UploadXML()" />
  <script>
    function UploadXML() {
      var dic = new FormData();
      dic.append('user', 'v1');//append() 给当前FormData对象添加一个键/值对,name字段名称.value字段值.可以是,或者一个字符串,如果全都不是,则该值会被自动转换成字符串.
      dic.append('fafafa', document.getElementById('imgs').files[0]);
      console.log(dic);
      var xml = new XMLHttpRequest();
      xml.open('post', '/upload.html', true);
      xml.onreadystatechange = function () {
        if(xml.readyState == 4){
          var obj = JSON.parse(xml.responseText);
          if(obj.status){
            var img = document.createElement('img');
            img.src = "/" + obj.path;
            document.getElementById("imgs").appendChild(img);
          }
        }
      };
      xml.send(dic);//发送请求. 如果该请求是异步模式(默认),该方法会立刻返回. 相反,如果请求是同步模式,则直到请求的响应完全接受以后,该方法才会返回.
    }
  </script>
</body>
</html>

5.4 jQuery Ajax上传，同时使用了iframe，一下代码包含了两种方法。即：

  • 1-利用JQuery Ajax + FormData进行文件上传
  • 2-基于Iframe实现伪Ajax 上传文件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .container img{
      width: 200px;
      height: 200px;
    }
  </style>
  <script>
    function li(arg) {
      console.log(arg);
    }
  </script>
</head>
<body>
  <h1>测试Iframe功能</h1>
  <input type="text" id="url" />
  <input type="button" value="点我" onclick="iframeChange();" />
  <iframe id="ifr" src=""></iframe>
  <hr/>
  <h1>基于iframe实现form提交</h1>
  <form action="/upload.html" method="post" target="iframe_1" enctype="multipart/form-data">
    <iframe style="display: none" id="iframe_1" name="iframe_1" src="" onload="loadIframe();"></iframe>
    <input type="text" name="user" />
    <input type="file" name="fafafa" />
    <input type="submit" />
  </form>
  <h1>图片列表</h1>
  <div class="container" id="imgs">
    {% for img in img_list %}
      <img src="/{{ img.path }}">
    {% endfor %}
  </div>
  <input type="file" id="img" />
  <input type="button" value="提交XML" onclick="UploadXML()" />
  <input type="button" value="提交JQ" onclick="Uploadjq()" />
  <script src="/static/jquery-2.1.4.min.js"></script>
  <script>
    function UploadXML() {
      var dic = new FormData();
      dic.append('user', 'v1');
      dic.append('fafafa', document.getElementById('img').files[0]);
      var xml = new XMLHttpRequest();
      xml.open('post', '/upload.html', true);
      xml.onreadystatechange = function () {
        if(xml.readyState == 4){
          var obj = JSON.parse(xml.responseText);
          if(obj.status){
            var img = document.createElement('img');
            img.src = "/" + obj.path;
            document.getElementById("imgs").appendChild(img);
          }
        }
      };
      xml.send(dic);
    }
    function Uploadjq() {
      var dic = new FormData();
      dic.append('user', 'v1');
      dic.append('fafafa', document.getElementById('img').files[0]);
      $.ajax({
        url: '/upload.html',
        type: 'POST',
        data: dic,
        processData: false, // tell jQuery not to process the data
        contentType: false, // tell jQuery not to set contentType
        dataType: 'JSON',
        success: function (arg) {
          if (arg.status){
            var img = document.createElement('img');
            img.src = "/" + arg.path;
            $('#imgs').append(img);
          }
        }
      })
    }
    function iframeChange() {
      var url = $('#url').val();
      $('#ifr').attr('src', url);
    }
    function loadIframe() {
      console.log(1);
      // 获取iframe内部的内容
      var str_json = $('#iframe_1').contents().find('body').text();
      var obj = JSON.parse(str_json);
      if (obj.status){
        var img = document.createElement('img');
        img.src = "/" + obj.path;
        $('#imgs').append(img);
      }
    }
  </script>
</body>
</html>

希望本文所述对大家基于Django框架的Python程序设计有所帮助。

Python Web框架之Django框架文件上传功能详解

- Author -

宁生信

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Python 相关文章推荐
Python内置的字符串处理函数详细整理(覆盖日常所用)
Aug 19 Python
Python实现比较两个文件夹中代码变化的方法
Jul 10 Python
深入解析Python编程中super关键字的用法
Jun 24 Python
Python合并字典键值并去除重复元素的实例
Dec 18 Python
Python Flask基础教程示例代码
Feb 07 Python
利用Python yagmail三行代码实现发送邮件
May 11 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
Jan 04 Python
Python 私有化操作实例分析
Nov 21 Python
python写一个随机点名软件的实例
Nov 28 Python
Python爬虫实现vip电影下载的示例代码
Apr 20 Python
python进度条显示-tqmd模块的实现示例
Aug 23 Python
python使用re模块爬取豆瓣Top250电影
Oct 20 Python
基于 Django 的手机管理系统实现过程详解
Aug 16 #Python
python创建与遍历List二维列表的方法
Aug 16 #Python
python每天定时运行某程序代码
Aug 16 #Python
pyinstaller打包opencv和numpy程序运行错误解决
Aug 16 #Python
Python Web框架之Django框架Form组件用法详解
Aug 16 #Python
Python自动化导出zabbix数据并发邮件脚本
Aug 16 #Python
python禁用键鼠与提权代码实例
Aug 16 #Python
.NET面试题(131) 软件工程师面试题(40) DB面试题(126) Android面试题(6) LINUX面试题(83) 软件测试工程师面试题(53) 网络工程师面试题(96) EJB面试题(46) Oracle面试题(81) C#面试题(90)
You might like
我的论坛源代码(八)
2006/10/09 PHP
简单的php新闻发布系统教程
2014/05/09 PHP
ThinkPHP通过AJAX返回JSON的两种实现方法
2014/12/18 PHP
PHP读MYSQL中文乱码的快速解决方法
2016/10/01 PHP
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
犀利的js 函数集合
2009/06/11 Javascript
javascript call方法使用说明
2010/01/11 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
2016/12/28 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
vue.js数据绑定的方法（单向、双向和一次性绑定）
2017/07/13 Javascript
老生常谈ES6中的类
2017/07/31 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
JavaScript常见鼠标事件与用法分析
2019/01/03 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
Python字符串替换实例分析
2015/05/11 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
Python函数参数分类原理详解
2020/05/28 Python
Django 实现图片上传和下载功能
2020/12/31 Python
纯CSS3制作的鼠标悬停时边框旋转
2017/01/03 HTML / CSS
里程积分管理买卖交换平台：Points.com
2017/01/13 全球购物
美国购买汽车零件网站：Buy Auto Parts
2018/04/02 全球购物
安全资金保障制度
2014/01/23 职场文书
30年同学聚会邀请函
2014/01/25 职场文书
教师暑期培训感言
2014/08/15 职场文书
十佳标兵事迹材料
2014/08/18 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
安全教育日主题班会
2015/08/13 职场文书
PyTorch dropout设置训练和测试模式的实现
2021/05/27 Python