首页
所有分类
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 捕获shell脚本的输出结果实例
Jan 04 Python
Python中动态创建类实例的方法
Mar 24 Python
Python实现解析Bit Torrent种子文件内容的方法
Aug 29 Python
基于使用paramiko执行远程linux主机命令(详解)
Oct 16 Python
100行Python代码实现自动抢火车票（附源码）
Jan 11 Python
python反编译学习之字节码详解
May 19 Python
解决使用python print打印函数返回值多一个None的问题
Apr 09 Python
python如何求圆的面积
Jul 01 Python
利用scikitlearn画ROC曲线实例
Jul 02 Python
python switch 实现多分支选择功能
Dec 21 Python
python爬虫beautifulsoup库使用操作教程全解(python爬虫基础入门)
Feb 19 Python
秀！学妹看见都惊呆的Python小招数！【详细语言特性使用技巧】
Apr 27 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
Hash(1) IOC(3) Vmware(3) XML(1) 入门基础(1) 数据类型(8) Geospatial(1) 触发器(3) Bean(3) RabbitMQ(3)
You might like
php+mysqli实现批量执行插入、更新及删除数据的方法
2015/01/29 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
PHP实现二维数组按某列进行排序的方法
2016/11/18 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
如何在PHP中读写文件
2020/09/07 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
js 学习笔记（三）
2009/12/29 Javascript
详解JavaScript基于面向对象之创建对象（1）
2015/12/10 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
jQuery EasyUI ProgressBar进度条组件
2017/02/28 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
浅谈angularJS的$watch失效问题的解决方案
2017/08/11 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
vue实现一个炫酷的日历组件
2018/10/08 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
Node.js实现一个HTTP服务器的方法示例
2019/05/13 Javascript
JavaScript 处理树数据结构的方法示例
2019/06/16 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
2019/12/19 Javascript
微信小程序使用前置摄像头拍照
2020/10/22 Javascript
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
如何准确判断请求是搜索引擎爬虫（蜘蛛）发出的请求
2015/10/13 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
Python解释器及PyCharm工具安装过程
2020/02/26 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
python3爬虫中异步协程的用法
2020/07/10 Python
软件配置管理有什么好处
2015/04/15 面试题
投标承诺书怎么写
2014/05/24 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
人民币使用说明书
2019/04/17 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python