框架----Django之文件上传
一、文件上传
1. 浏览器访问
http://127.0.0.1:8000/f1/
http://127.0.0.1:8000/f2/
2. urls
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ 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 os 14 # request.POST 15 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=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 url from django.contrib import admin from app01 import views urlpatterns = [ 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 src="/static/jquery-1.12.4.js"></script> 27 <script> 28 29 function upload1(){ 30 var formData = new FormData(); 31 formData.append('k1','v1'); 32 formData.append('fafafa',document.getElementById('i1').files[0]); 33 34 var xhr = new XMLHttpRequest(); 35 xhr.onreadystatechange = function(){ 36 if(xhr.readyState == 4){ 37 var file_path = xhr.responseText; 38 var tag = document.createElement('img'); 39 tag.src = "/"+ file_path; 40 document.getElementById('container1').appendChild(tag); 41 42 } 43 }; 44 xhr.open('POST','/upload/'); 45 xhr.send(formData); 46 } 47 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.getElementById('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 function upload3(){ 71 document.getElementById('ifr').onload = loadIframe; 72 document.getElementById('f1').submit(); 73 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. 执行结果截图
