<!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))上传文件的三种方式xhr,ajax和iframe
原文地址：https://www.cnblogs.com/sunhao96/p/9025704.html