python文件上传的三种方式

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

python⽂件上传的三种⽅式
def upload(request):
return render(request, 'upload.html')
def upload_file(request):
username = request.POST.get('username')
fafafa = request.FILES.get('fafafa')
with open(, 'wb') as f:
for item in fafafa.chunks():
f.write(item)
print(username)
ret = {'code': '123456', 'data': 'hahahaha'}
import json
return HttpResponse(json.dumps(ret))
views.py
1.xmlHttpResquest
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.file{
width: 100px;
height: 50px;
position: absolute;
z-index: 100;
opacity: 0;
}
.upload{
width: 100px;
height: 50px;
position: absolute;
z-index: 90;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: blue;
text-align: center;
line-height: 50px;
border-radius: 30px;
color: white;
}
</style>
<body>
<div style="position: relative;height: 50px;width: 100px;">
<input class="file" type="file" id="fafafa">
<a class="upload">上传</a>
</div>
<input type="button" value="xhr提交" onclick="xhrSubmit()">
<script src="/static/jquery-1.12.4.js"></script>
<script>
function xhrSubmit() {
var file_obj = document.getElementById('fafafa').files[0];
var fd = new FormData();
fd.append('username','root')
fd.append('fafafa',file_obj)
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload_file/',true);

xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 接收完毕
var obj = JSON.parse(xhr.responseText);
console.log(obj);
}
};
xhr.send(fd);
}
</script>
</body>
</html>
View Code
2.jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.file{
width: 100px;
height: 50px;
position: absolute;
z-index: 100;
opacity: 0;
}
.upload{
width: 100px;
height: 50px;
position: absolute;
z-index: 90;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: blue;
text-align: center;
line-height: 50px;
border-radius: 30px;
color: white;
}
</style>
<body>
<div style="position: relative;height: 50px;width: 100px;">
<input class="file" type="file" id="fafafa">
<a class="upload">上传</a>
</div>
<input type="button" value="jQuery提交" onclick="jqSubmit()">
<script src="/static/jquery-1.12.4.js"></script>
<script>
function jqSubmit() {
{#var file_obj = $('fafafa').files[0];#}
var file_obj = document.getElementById('fafafa').files[0];
var fd = new FormData();
fd.append('username','root');
fd.append('fafafa',file_obj);
$.ajax({
url: '/upload_file/',
type: 'post',
data: fd,
processData: false, // tell jQuery not to process the data
contentType: false, // tell jQuery not to set contentType
success:function (arg,a1,a2) {
console.log(arg);
console.log(a1);
console.log(a2);
}
})
}
</script>
</body>
</html>
View Code
3.iframe
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="/upload_file/" method="POST" enctype="multipart/form-data" target="ifm1">

<iframe id='ifm1' name="ifm1"></iframe>
<input type="file" name="fafafa">
<input type="submit" onclick="iframeSubmit()" value="iframe提交">
</form>
<script src="/static/jquery-1.12.4.js"></script>
<script>
function iframeSubmit() {
$('#ifm1').load(function () {
var text = $('#ifm1').contents().find('body').text();
var obj = JSON.parse(text)
console.log(obj)
})
}
</script>
</body>
</html>
View Code
FormData
The FormData interface provides a way to easily construct a set of key/value pairs representing form fields and their values, which can then be easily sent using the method. It uses the same format a form would use if the encoding type were set to "multipart/form-data".
An object implementing FormData can directly be used in a structure, instead of : for (var p of myFormData) is equivalent to for (var p of myFormData.entries()).
FormData对象⽤以将数据编译成键值对，以便⽤来发送数据。

其主要⽤于发送表单数据，但亦可⽤于发送带键数据(keyed data)，⽽独⽴于表单使⽤。

如果表单enctype属性设为multipart/form-data ，则会使⽤表单的⽅法来发送数据，从⽽，发送数据具有同样形式。

https:///en-US/docs/Web/API/FormData
1、通过get(key)与getAll(key)来获取相对应的值
// 获取key为age的第⼀个值
formdata.get("age");
// 获取key为age的所有值，返回值为数组类型
formdata.getAll("age");
View Code
2、通过append(key,value)在数据末尾追加数据
//通过FormData构造函数创建⼀个空对象
var formdata=new FormData();
//通过append()⽅法在末尾追加key为name值为laoliu的数据
formdata.append("name","laoliu");
//通过append()⽅法在末尾追加key为name值为laoli的数据
formdata.append("name","laoli");
//通过append()⽅法在末尾追加key为name值为laotie的数据
formdata.append("name","laotie");
//通过get⽅法读取key为name的第⼀个值
console.log(formdata.get("name"));//laoliu
//通过getAll⽅法读取key为name的所有值
console.log(formdata.getAll("name"));//["laoliu", "laoli", "laotie"]
View Code
3、通过set(key, value)来设置修改数据
# key的值不存在，会添加⼀条数据
//通过FormData构造函数创建⼀个空对象
var formdata=new FormData();
//如果key的值不存在会为数据添加⼀个key为name值为laoliu的数据formdata.set("name","laoli");
//通过get⽅法读取key为name的第⼀个值
console.log(formdata.get("name"));//laoli
View Code
4、通过has(key)来判断是否存在对应的key值
//通过FormData构造函数创建⼀个空对象
var formdata=new FormData();
//通过append()⽅法在末尾追加key为name值为laoliu的数据
formdata.append("name","laoliu");
//判断是否包含key为name的数据
console.log(formdata.has("name"));//true
//判断是否包含key为age的数据
console.log(formdata.has("age"));//false
View Code
5、通过delete(key)可以删除数据
//通过FormData构造函数创建⼀个空对象
var formdata=new FormData();
//通过append()⽅法在末尾追加key为name值为laoliu的数据
formdata.append("name","laoliu");
console.log(formdata.get("name"));//laoliu
//删除key为name的值
formdata.delete("name");
console.log(formdata.get("name"));//null
View Code
通过XMLHttpRequest发送数据
<form id="advForm">
<p>⼴告名称：<input type="text" name="advName" value="xixi"></p> <p>⼴告类别：<select name="advType">
<option value="1">轮播图</option>
<option value="2">轮播图底部⼴告</option>
<option value="3">热门回收⼴告</option>
<option value="4">优品精选⼴告</option>
</select></p>
<p>⼴告图⽚：<input type="file" name="advPic"></p>
<p>⼴告地址：<input type="text" name="advUrl"></p>
<p>⼴告排序：<input type="text" name="orderBy"></p>
<p><input type="button" id="btn" value="添加"></p>
</form>
HTML
var btn=document.querySelector("#btn");
btn.onclick=function(){
var formdata=new FormData(document.getElementById("advForm"));
var xhr=new XMLHttpRequest();
xhr.open("post","http://127.0.0.1/adv");
xhr.send(formdata);
xhr.onload=function(){
if(xhr.status==200){
//...
}
}
}
JS
上传⾄指定⽬录
settings.py⽂件
MEDIA_URL = "/media/"
MEDIA_ROOT = os.path.join(BASE_DIR, "media")
然后在project的⽬录下创建⽂件夹"media"。