侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

Python  /  管理员 发布于 7年前   258

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

上传方式:

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

1,创建项目

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,HttpResponsefrom app01 import modelsimport jsonimport osdef 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="https:{{ 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="https:{{ 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="https:/article/"></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="https:/article/" 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="https:{{ 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="https: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函数参数(必须参数、可变参数、关键字参数)
    下一条:
    python创建与遍历List二维列表的方法
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 在python语言中Flask框架的学习及简单功能示例(0个评论)
    • 在Python语言中实现GUI全屏倒计时代码示例(0个评论)
    • Python + zipfile库实现zip文件解压自动化脚本示例(0个评论)
    • python爬虫BeautifulSoup快速抓取网站图片(1个评论)
    • vscode 配置 python3开发环境的方法(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第四课:僵尸作战系统(0个评论)
    • 智能合约Solidity学习CryptoZombie第三课:组建僵尸军队(高级Solidity理论)(0个评论)
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2018-04
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2022-01
    • 2023-07
    • 2023-10
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客