<!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
上传预览
如果发送的是文件建议使用iframe 因为他不依赖于其他，而jQuery(依赖FormData),XMLHttpresquest(也依赖FormData)
html
<form id="form1" action="/xiaoqing/upload_file/" method="post" target="ifm1" enctype="multipart/form-data">
{% csrf_token %} <iframe id="ifm2" name="ifm1" style="display: none"></iframe>
<input type="file" name="upload" onchange="uploadChange();"> <input type="submit" onclick="iframesubmitForm();" value="Form提交" > </form> <div id="preview"></div> <script>
//上传预览
function uploadChange() { #绑定onchange事件
$('#ifm2').load(function(){ var text= $('#ifm2').contents().find('body').text();
var obj= JSON.parse(text);
$('#preview').empty()
var img_tag=document.createElement('img');
#创建img标签 img_tag.src='/'+obj.data;$('#preview').append(img_tag); }) $('#form1').submit(); #提交表单 } //第三种上传方式预览
function iframesubmitForm() { $('#ifm2').load(function(){ var text= $('#ifm2').contents().find('body').text();
var obj= JSON.parse(text); $('#preview').empty()
var img_tag=document.createElement('img');
img_tag.src='/'+ obj.data;
$('#preview').append(img_tag); }) } </script>
views.py:
def upload_file(request):
username=request.POST.get('username')
upload_obj=request.FILES.get('upload')
print(upload_obj)
print(username)
import os
image_path=os.path.join('static/imgs',upload_obj.name)
# upload_path=os.path.join('uploads',upload_obj.name)
with open(image_path,'wb') as f:
for item in upload_obj.chunks():
f.write(item)
ret = {'status':True,'data':image_path}
return HttpResponse(json.dumps(ret)) #返回image_path路径