Python编程
搜索
分类

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

作者：宁生信 时间：2023-06-25 11:19:40　

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

来源：https://www.cnblogs.com/gregoryli/p/7683732.html

标签：Django,文件上传
0
投稿

猜你喜欢

  • 如何在Python中将字符串转换为集合

    2023-08-26 07:31:11

  • pycharm 复制代码出现空格的解决方式

    2023-08-27 12:36:37

  • ASP中实现分页显示的七种方法

    2007-09-20 13:19:00

  • Python读取Excel表格,并同时画折线图和柱状图的方法

    2023-12-25 07:11:27

  • python常用模块详解

    2021-05-24 05:16:55

  • 在Linux上安装Python的Flask框架和创建第一个app实例的教程

    2021-08-26 14:23:11

  • 使用ASP订制自己的XML文件读写方法

    2008-10-24 09:35:00

  • 解决Js先触发失去焦点事件再执行点击事件的问题

    2024-04-22 12:50:33

  • pytorch实现CNN卷积神经网络

    2023-07-04 20:23:06

  • 高效优化博客的用户阅读体验

    2009-06-16 18:09:00

  • python 配置uwsgi 启动Django框架的详细教程

    2022-10-29 06:11:15

  • opencv用VS2013调试时用Image Watch插件查看图片

    2022-04-20 14:49:12

  • asp更改Windows2000管理者密码？

    2010-06-26 11:03:00

  • 基于PHP常用文件函数和目录函数整理

    2023-06-09 22:02:34

  • 深入flask之异步非堵塞实现代码示例

    2021-12-27 17:37:25

  • Oracle客户端 NLS_LANG 的设置方法

    2012-07-11 15:55:27

  • Python 经典面试题 21 道【不可错过】

    2023-10-29 04:56:20

  • bootstrapvalidator之API学习教程

    2024-05-22 10:36:49

  • golang switch语句的灵活写法介绍

    2024-04-23 09:39:49

  • PHP array_key_exists检查键名或索引是否存在于数组中的实现方法

    2024-05-05 09:18:55
    • asp之家 网络编程 m.aspxhome.com