<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.upload {
display: inline-block;
background-color: #ef4300;
cursor: pointer;
width: 100px;
height: 35px;
text-align: center;
position: absolute;
line-height: 35px;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 99;
}
.file {
width: 100px;
height: 35px;
text-align: center;
position: absolute;
line-height: 35px;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 100;
opacity: 0;
}
</style>
</head>
<body>
<div style="position: relative;width: 100px;height: 35px">
<input type="file" id="i1" name="upload" class="file">
<a class="upload">上传</a>
</div>
<input type="submit" value="xhr提交" onclick="xhrSubmit();">
<input type="submit" value="ajax提交" onclick="ajaxSubmit();">
<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/jquery.cookie.js"></script>
<form action="/xiaoqing/upload_file/" method="post" target="ifm1" enctype="multipart/form-data">
{% csrf_token %}
<iframe id="ifm2" name="ifm1"></iframe>
<input type="file" name="upload">
<input type="submit" onclick="iframesubmitForm();" value="Form提交" >
</form>
<script>
var csrftoken = $.cookie(‘csrftoken‘);
//第一种上传方式 iframe
function iframesubmitForm() {
$(‘#ifm2‘).load(function(){
var text= $(‘#ifm2‘).contents().find(‘body‘).text();
var obj= JSON.parse(text);
console.log(obj);
})
}
//第二种上传方法 ajax
function ajaxSubmit() {
var fileobj = document.getElementById(‘i1‘).files[0];
console.log(fileobj);
var fd = new FormData(); //依赖FormData对象
fd.append(‘username‘, ‘root‘);
fd.append(‘upload‘, fileobj);
$.ajax({
url: ‘/xiaoqing/upload_file/‘,
type: ‘POST‘,
data: fd,
processData: false,
cententType: false,
headers: {‘X-CSRFtoken‘: csrftoken},
success: function(arg,a1,a2){
console.log(arg);
console.log(a1);
console.log(a2);
}
})
}
//第三种上传方法 xhr对象
function xhrSubmit() {
var fileobj = document.getElementById(‘i1‘).files[0];
console.log(fileobj);
var fd = new FormData(); //依赖FormData对象
fd.append(‘username‘,‘root‘);
fd.append(‘upload‘,fileobj);
var xhr= new XMLHttpRequest(); //创建对象
xhr.open(‘POST‘,‘/xiaoqing/upload_file/‘,true);
xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded; charset-UTF-8‘); //POST请求必须设置
xhr.setRequestHeader(‘X-CSRFtoken‘,csrftoken);
xhr.send(fd);
xhr.onreadystatechange = function() {
if(xhr.readyState == 4){
var obj = JSON.parse(xhr.responseText); //返回值
console.log(obj);
}
}
}
</script>
</body>
</html>
三种上传方式
def upload(request):
return render(request,‘upload.html‘)
def upload_file(request):
username=request.POST.get(‘username‘)
upload_obj=request.FILES.get(‘upload‘)
print(upload_obj)
print(username)
import os
upload_path=os.path.join(‘uploads‘,upload_obj.name)
with open(upload_path,‘wb+‘) as f:
for item in upload_obj.chunks():
f.write(item)
ret = {‘status‘:True,‘data‘:request.POST.get(‘username‘)}
return HttpResponse(json.dumps(ret))
views.py
原文地址：https://www.cnblogs.com/sunhao96/p/9025704.html
时间： 2024-10-12 11:30:52