一、文件上传
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})
views
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>
f1.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>
f2.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)
views
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>
upload.html
5. 执行结果截图
时间： 2024-10-06 20:05:07