Python Web框架之Django框架文件上传功能详解
作者:宁生信 发布时间:2023-06-25 11:19:40
本文实例讲述了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程序设计有所帮助。
来源:https://www.cnblogs.com/gregoryli/p/7683732.html


猜你喜欢
- 什么叫做SPA单页应用单页Web应用 (single page web application,SPA) ,就是只有一张
- 先介绍下什么是协程:协程,又称微线程,纤程,英文名Coroutine。协程的作用,是在执行函数A时,可以随时中断,去执行函数B,然后中断继续
- 中国互联网协会与Google(谷歌)公司联合主办“Internet+ 互联网世纪论坛”,AJAX技术的发明人Jesse James Garr
- 我们先来看下秒杀活动页面代码<!DOCTYPE HTML><html> <head> <
- js判断undefined类型if (reValue== undefined){alert("undefined");}
- 1.在浏览器搜索python.org,如下图选择第一个2.进入python官网,选择dowload然后选择windows如下图:3.选择py
- 升序import pandas as pdimport numpy as npdata = np.random.randint(low=2,
- 本文介绍python统计词频的几种方法,供大家参考方法一:运用集合去重方法def word_count1(words,n):
- 本文实例为大家分享了js通过开始结束控制计时器的具体实现代码,供大家参考,具体内容如下时间戳的使用的可以取消对多次点击事件产生效果的累加,譬
- 对于Linux用户而言,命令行操作我们已经非常熟悉了。与其他流行的操作系统不同,在Linux社区中,使用命令行与使用图形用户界面执行类似任务
- 一、必备技能1、logging模块的使用(1)5个日志等级/以及5个输出日志的内置函数(2)日志收集器、日志输出渠道的概念(3)如何自定义日
- 本文实例讲述了Python根据指定日期计算后n天,前n天是哪一天的方法。分享给大家供大家参考,具体如下:# -*- coding:utf-8
- 最近用到了mysql5.7的json字段的检索查询,发现挺好用的,记录一下笔记我们有一个日志表,里面的data字段是保存不同对象的json数
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 质数又称素数。一个大于1的自然数,除了1和它自身外,不能被其他自然数整除的数叫做质数;否则称为合数。一、判断一个数是否为素数:基于定义def
- Select CONVERT(varchar(100), GETDATE(), 0): 05 16 2006 10:57AM Select
- 需求描述:展示信息时其中部门区域是未知数量的,需要通过遍历进行展示。如下图举例,其中地址和备注是一一对应关系,需遵循该样式。问题描述:起初我
- 导入模块模块通常为单独的.py文件,可以用import直接引用,可以作为模块的文件类型有.py、.pyo、.pyc、.pyd、.so、.dl
- 引子Linux下不支持QQ等功能丰富的IM,虽然可以通过wine运行QQ2012,但是还是喜欢在gtalk群中聊天,gtalk群不支持图片方
- 1、文件添加方式:pycharm提供了一个在新建文件自动生成文件头注释的功能,可以实现自动生成运行环境,作者、日期等必要信息,使用比较方便,