首页 > 代码库 > 框架----Django之文件上传
框架----Django之文件上传
一、文件上传
1. 浏览器访问
http://127.0.0.1:8000/f1/http://127.0.0.1:8000/f2/2. urls
from django.conf.urls import urlfrom django.contrib import adminfrom app01 import viewsurlpatterns = [ url(r‘^admin/‘, admin.site.urls), url(r‘^f1/‘, views.f1), url(r‘^f2/‘, views.f2),]
3. views
1 from django.shortcuts import render,redirect,HttpResponse 2 from app01 import models 3 from django.forms import Form 4 from django.forms import fields 5 from django.forms import widgets 6 7 8 # **************************文件上传************************** 9 def f1(request):10 if request.method == "GET":11 return render(request,‘f1.html‘)12 else:13 import os14 # request.POST15 file_obj = request.FILES.get(‘fafafa‘)16 f = open(os.path.join(‘static‘,file_obj.name),‘wb‘)17 for chunk in file_obj.chunks():18 f.write(chunk)19 f.close()20 # return render(request,‘f1.html‘) # 上传成功后刷新当前页面21 return HttpResponse(‘上传成功‘) # 上传完成后显示文字22 23 class F2Form(Form):24 user = fields.CharField()25 fafafa = fields.FileField()26 27 def f2(request):28 if request.method == "GET":29 obj = F2Form()30 return render(request,‘f2.html‘,{‘obj‘:obj})31 else:32 obj = F2Form(data=http://www.mamicode.com/request.POST,files=request.FILES)33 if obj.is_valid():34 print(obj.cleaned_data.get(‘fafafa‘).name)35 print(obj.cleaned_data.get(‘fafafa‘).size)36 return render(request,‘f2.html‘,{‘obj‘:obj})
4. templates
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <form method="POST" action="/f1/" enctype="multipart/form-data"> 9 {% csrf_token %}10 <input type="text" name="user" />11 <input type="file" name="fafafa" />12 <input type="submit" value="提交" />13 </form>14 </body>15 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <form method="POST" action="/f2/" enctype="multipart/form-data"> 9 {# 不能少了这个属性:enctype="multipart/form-data" ,否则后台拿不到数据 #}10 11 {% csrf_token %}12 {{ obj.user }}13 {{ obj.fafafa }}14 <input type="submit" value="提交" />15 </form>16 </body>17 </html>
二、文件上传--------原生Ajax上传文件、jQuery Ajax上传文件、伪Ajax上传文件
1. 浏览器访问
http://127.0.0.1:8000/upload/
2. urls
from django.conf.urls import urlfrom django.contrib import adminfrom app01 import viewsurlpatterns = [ url(r‘^admin/‘, admin.site.urls), url(r‘^upload/‘, views.upload),]
3. views
1 from django.shortcuts import render,HttpResponse,redirect 2 3 import os 4 def upload(request): 5 if request.method == ‘GET‘: 6 return render(request,‘upload.html‘) 7 else: 8 print(request.POST,request.FILES) 9 file_obj = request.FILES.get(‘fafafa‘)10 file_path = os.path.join(‘static‘,file_obj.name)11 with open(file_path,‘wb‘) as f:12 for chunk in file_obj.chunks():13 f.write(chunk)14 15 return HttpResponse(file_path)
4. templates
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <h1>原生Ajax上传文件</h1> 9 <input type="file" id="i1" />10 <a onclick="upload1();">上传</a>11 <div id="container1"></div>12 13 <h1>jQuery Ajax上传文件</h1>14 <input type="file" id="i2" />15 <a onclick="upload2();">上传</a>16 <div id="container2"></div>17 18 <h1>伪 Ajax上传文件</h1>19 <form id="f1" method="POST" action="/upload/" target="ifr" enctype="multipart/form-data">20 <iframe id="ifr" name="ifr" style="display: none"></iframe>21 <input type="file" name="fafafa" />22 <a onclick="upload3();">上传</a>23 </form>24 <div id="container3"></div>25 26 <script>27 /* $$$$$$ 原生Ajax上传文件 $$$$$$ */28 function upload1() {29 var formData = new FormData();30 formData.append(‘k1‘,‘v1‘);31 formData.append(‘fafafa‘,document.getElementById(‘i1‘).files[0]);32 33 var xhr = new XMLHttpRequest();34 xhr.onreadystatechange = function () {35 if(xhr.readyState == 4){36 var file_path = xhr.responseText;37 var tag = document.createElement(‘img‘);38 tag.src = ‘/‘+ file_path;39 document.getElementById(‘container1‘).appendChild(tag);40 }41 };42 xhr.open(‘POST‘,‘/upload/‘);43 xhr.send(formData);44 }45 46 47 /* $$$$$$ jQuery Ajax上传文件 $$$$$$ */48 function upload2() {49 var formData = new FormData();50 formData.append(‘k1‘,‘v1‘);51 //formData.append(‘fafafa‘,document.getElementById(‘i1‘).files[0]);52 formData.append(‘fafafa‘,$(‘#i2‘)[0].files[0]);53 //$(‘#i2‘) -> $(‘#i2‘)[0]54 //document.getElementsByName(‘i1‘) -> $(document.getElementById(‘i1‘))55 56 $.ajax({57 url:‘/upload/‘,58 type:‘POST‘,59 data:formData,60 contentType:false,61 processData:false,62 success:function (arg) {63 var tag = document.createElement(‘img‘);64 tag.src = ‘/‘+ arg;65 $(‘#container2‘).append(tag);66 }67 })68 }69 70 /* $$$$$$ 伪 Ajax上传文件 $$$$$$ */71 function upload3() {72 document.getElementById(‘ifr‘).onload = loadIframe;73 document.getElementById(‘f1‘).submit();74 }75 function loadIframe() {76 var content = document.getElementById(‘ifr‘).contentWindow.document.body.innerText;77 var tag = document.createElement(‘img‘);78 tag.src = ‘/‘+ content;79 $(‘#container3‘).append(tag);80 }81 </script>82 </body>83 </html>
5. 执行结果截图
框架----Django之文件上传
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。