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

2024-10-01 11:20:17

本文实例讲述了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,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程序设计有所帮助。

Django中的文件的上传的几种方式

PS:这段时间有点不在状态,刚刚找回那个状态,那么我们继续曾经的梦想今天我们来补充一下文件的上传的几种方式: 首先我们先补充的一个知识点: 一.请求头ContentType: ContentType 指的是请求体的编码类型,常见的类型共有三种: 1.application/x-www-form-urlencoded 这应该是最常见的POST提交数据的方式.浏览器的原生 <form> 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urle
python+django快速实现文件上传

对于web开来说,用户登陆.注册.文件上传等是最基础的功能,针对不同的web框架,相关的文章非常多,但搜索之后发现大多都不具有完整性,对于想学习web开发的新手来说就没办法一步一步的操作练习:对于web应用来说,包括数据库的创建,前端页面的开发,以及中间逻辑层的处理三部分. 本系列以可操作性为主,介绍如何通过django web框架来实现一些简单的功能.每一章都具有完整性和独立性.使用新手在动手做的过程中体会web开发的过程,过程中细节请参考相关文档. 本操作的环境: =============
Django框架文件上传与自定义图片上传路径、上传文件名操作分析

本文实例讲述了Django框架文件上传与自定义图片上传路径.上传文件名操作.分享给大家供大家参考,具体如下: 文件上传 1.创建上传文件夹在static文件夹下创建uploads用于存储接收上传的文件在settings中配置, MEDIA_ROOT=os.path.join(BASE_DIR,r'static/uploads') 2.定义上传表单 <form action="{% url 'app:do_upload' %}" method="post"
Python+django实现简单的文件上传

今天分享一下Django实现的简单的文件上传的小例子. 步骤 •创建Django项目,创建Django应用 •设计模型 •处理urls.py 以及views.py •设计模板,设计表单 •运行项目,查看数据库下面我们就一起来分别完成每一个小部分吧. 创建项目和应用 django-admin startproject Django_upload django-admin startapp app 添加一个名为upload的目录,待会要用哦. 然后记得在settings.py 中的INS
Python的Django中将文件上传至七牛云存储的代码分享

最近在写的一个django小项目需要实现用户上传图片的功能,使用到了七牛云存储,特此记录下来.这里我使用的七牛python SDK 版本是7.0.3,函数使用上可能会与旧版有些不同. 原本文件上传需要先把文件上传到自己的业务服务器,再从业务服务器上传到云存储.现在七牛的表单上传可以直接把文件上传到七牛,不再需要业务服务器的中转,节省了流量成本,降低了业务服务器的压力.而且通过设置,还可以在文件上传完成后让客户端自动重定向到一个上传成功的结果页面.这里我就是使用了七牛的表单上传. 表单上传用户上
Python+django实现文件上传

1.文件上传(input标签) (1)html代码(form表单用post方法提交) <input class="btn btn-primary col-md-1" style="margin:0px 15px 25px 15px;" id="submitForm" type="button" value="提交" /> <form id="picture_form"
django框架实现一次性上传多个文件功能示例【批量上传】

本文实例讲述了django框架实现一次性上传多个文件功能.分享给大家供大家参考,具体如下: 在用django 写文件上传的时候,从request.FILES['myfiles'] 获取到的文件始终只有一个, 但在HTML页面上明明用 HTML5 的文件控件选择了多个文件,用的是CHROME 浏览器,一次可以选择多个文件上传.在 Pydev 开启debug模式,查看request 对象,发现上传的多个文件确实在request对象中,但为什么用request.FILES['myfiles']
Django处理文件上传File Uploads的实例

HttpRequest.FILES 表单上传的文件对象存储在类字典对象request.FILES中,表单格式需为multipart/form-data <form enctype="multipart/form-data" method="post" action="/foo/"> <input type="file" name="image" /> request.FILES中的键
django1.8使用表单上传文件的实现方法

Python下有许多款不同的 Web 框架.Django是重量级选手中最有代表性的一位.许多成功的网站和APP都基于Django. Django是一个开放源代码的Web应用框架,由Python写成. 在django中我们可以采用Form类来处理表单,通过实例化处理和在模板中渲染,就可以轻松完成表单的需求,采用django的表单处理方式,能帮我们省去很多的工作,比如验证不能为空,或者要符合某种模式的输入才有效,这些处理起来非常方便,不用自己再单独写代码去验证表单的数据正确性,所以在开发中比较常用,
Python Django框架单元测试之文件上传测试示例

本文实例讲述了Python Django框架单元测试之文件上传测试.分享给大家供大家参考,具体如下: Submitting files is a special case. To POST a file, you need only provide the file field name as a key, and a file handle to the file you wish to upload as a value. For example: >>> c = Client()
django多文件上传,form提交,多对多外键保存的实例

需求: 需要实现一个用户反馈的接口,用户通过接口提交: 1.一段文字 2. 一个log文件 3. 多个图片找了很多ModelForm,DRF-Serializer的资料,都没找到简单好用的,干脆就直接写,啥也不用. Model.py class UserFeedback(models.Model): user = models.ForeignKey(User, verbose_name="用户") desc = models.TextField(default=""

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

相关推荐

随机推荐