上传文件头像的2种方法,简单实例来看下用法
用法定义,fromdata可以传输任何数据
1 HttpRequest.FILES
2
3 一个类似于字典的对象,包含所有的上传文件信息。
4 FILES 中的每个键为<input type="file" name="" /> 中的name,值则为对应的数据。
5
6 注意,FILES 只有在请求的方法为POST 且提交的<form> 带有enctype="multipart/form-data" 的情况下才会
7 包含数据。否则,FILES 将为一个空的类似于字典的对象。
创建 dango app01项目 没有数据库
1. urls 代码如下
1 urlpatterns = [
2 url(r'^admin/', admin.site.urls),
3 url(r'^index/', views.index), 通过from表单提交文件头像
4 url(r'^indexAjax/', views.indexAjax), 通过fromdata提交文件头像
5 ]
2. views 代码如下
1 from django.shortcuts import render,HttpResponse
2
3 # Create your views here.
4
5
6
7 def index(request):
8 '''
9 通过from表单提交文件
10 :param request:
11 :return:
12 '''
13 if request.method == 'POST':
14
15 # print(request.body)
16 # print(request.POST) # <QueryDict: {'csrfmiddlewaretoken': ['2Fq1vmv59yRSUxDwlkym3qmk5bNpfdHLGzbTgveW5sdjPvTvRsuXRv6IQc7yENBN'], 'user': ['yuan'], 'cFile': ['day76.txt']}>
17 print(request.FILES) # <MultiValueDict: {'cFile': [<InMemoryUploadedFile: qq.png (image/png)>]}>
18
19 # 拿到文件对象
20 file_obj=request.FILES.get("cFile")
21 print(type(file_obj)) # 这个图片对象 <class 'django.core.files.uploadedfile.InMemoryUploadedFile'>
22
23 # 文件名字
24 name=file_obj.name 文件对象自带属性
25 print(name) # day76.txt
26
27 # 保存在本地
28 import os
29 from filePut import settings
30 path=os.path.join(settings.BASE_DIR,"app01","static",name)
31 with open(path,"wb") as f_write:
32 for line in file_obj:
33 f_write.write(line)
34 return HttpResponse(name)
35 return render(request,"index.html")
36
37
38 def indexAjax(request):
39 '''
40 通过ajax上传文件
41 :param request:
42 :return:
43 '''
44 if request.is_ajax() or request.method == 'POST':
45 # print(request.body)
46 # print(request.GET)
47 #
48 # print(request.POST)
49 # print(request.FILES)
50 # 拿到文件对象
51 file_obj=request.FILES.get("cFile")
52 print(file_obj)
53
54 # 文件名字
55 name = file_obj.name 对象自带属性
56 print(name) # day76.txt
57
58 # 保存本地
59 import os
60
61 from filePut import settings
62 path=os.path.join(settings.BASE_DIR,"app01","static",name)
63 with open(path,"wb") as f_write:
64 for line in file_obj:
65 f_write.write(line)
66 return HttpResponse(name)
67 return render(request,'index.html')
3. 前端代码如下
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>
7 </head>
8 <body>
9
10 {# from提交文件 #}
11 {#enctype="multipart/form-data">#} 关键 ############ 没有这句话,相当于提交的是k,value字符串
12
13 {#<form action="/index/" method="post" enctype="multipart/form-data">#}
14 {# {% csrf_token %}#}
15 {# <p>姓名: <input type="text" name="user"></p>#}
16 {# <p>文件: <input type="file" name="cFile"></p>#}
17 {# <input type="submit">#}
18 {#</form>#}
19
20
21
22 {# ajax提交文件,注意提交不能是个按钮它会直接就会提交#}
23 {#$formData.append#}
24
25 {% csrf_token %}
26 {# <p>姓名: <input type="text" id="user"></p>#}
27 <p>文件: <input type="file" id="cFile"></p>
28 <input type="button" value="提交" id="anniu">
29
30
31 <script>
32 $("#anniu").click(function () {
33 var $formData=new FormData() ;
34 {# $formData.append("user",$("#user").val());#}
35 file = $("#cFile")[0].files[0];queryset == query[0](对象,input标签) == query[0].files(input标签内文件) == files[0](最新文件)
36 $formData.append("cFile",file);
37
38
39 $.ajax({
40 url:"/indexAjax/",
41 type:"POST",
42 data:$formData,
43 contentType:false, // 文件类型不错处理 ###########################注意
44 processData:false, // 不对数据做预处理,不进行任何编发 声明当前的data数据是否进行转码或预处理,默认为true,即预处理 #############注意
45 headers:{"X-CSRFToken":$('[name="csrfmiddlewaretoken"]').val()},
46 success:function (data) {
47 console.log(data)
48 }
49 })
50
51 })
52 </script>
53
54 </body>
55 </html>
通过注册,来看看ajax fromdata用法,还有就是预览头像方法
1. 定义盒子,选择文件头像
1 {# 头像#}
2 <div class="form-group">
3 <label for="avatar">头像:</label>
4 {# 先定义一个存储头像的盒子#}
5 <div class="avatar_box">
6 {# 定义一个图片img#}
7 <img src="/static/img/default.png" alt="头像" id="avatar_img">
8 {# 这里需要去除验证错误的红,继承了form-group最好单写id#}
9 <input type="file" id="avatar_file" class="form-group">
10 {# 定义一个input标签上传文件#}
11 </div>
12 </div>
2. 发生change事件的时候,就会触发拿到上传的这个文件对象,等待这个文件加载到input框后,将这个选中文件路径给予img 的 src 来实现预览
1 {# 头像预览#}
2 $('#avatar_file').change(function () {
3 console.log('1111');
4 {# 上传文件对象#}
5 var file = $(this)[0].files[0];
6 {# 读取文件的url#}
7 console.log(file);
8 var reader = new FileReader();
9 reader.readAsDataURL(file);
10 {# 阅读完全后触发事件#}
11 reader.onload = function () {
12 {# 预览头像就是给头像一个源文件#}
13 console.log(this.result);
14 {# 读取的URL结果 this.result#}
15 $('#avatar_img').attr('src',this.result)
16 }
17 });
总结出一点,就是无论文件还是图片,通过input类型file传,这时候拿到对象 var file_obj = $(this)[0].files[0];
2. ajax 提交 fromdata 实现注册
1 {# AJAX提交注册表单,注册用户 #}
2 $(".regBtn").click(function () {
3
4 var $formData = new FormData(); # FormData 实例 封装成的字典
5
6 $formData.append('user',$('#id_user').val());
7 $formData.append('pwd',$('#id_pwd').val());
8 $formData.append('repeat_pwd',$('#id_repeat_pwd').val());
9 $formData.append('email',$('#id_email').val());
10 $formData.append('valid_code',$('#id_valid_code').val());
11 var file = $('#avatar_file')[0].files[0];
12 $formData.append('valid_img',file);
13 $formData.append('csrfmiddlewaretoken',$("[name='csrfmiddlewaretoken']").val());
14
15 $.ajax({
16 url: "/register/",
17 type: "POST",
18 data: $formData, // 将封装的数据打包传送到前端
19 processData:false, // 不做转码或预处理
20 contentType:false, // 文件类型不做处理
21 success: function (data) {
22 if (data.user) {
23 location.href = '/login/'
24 }
25 else {
26 $('span').html('');
27 $(".form-group").removeClass("has-error");
28 console.log(data.errors);
29
30 $.each(data.errors,function (i,j) {
31 $("#id_" + i).next().addClass('pull-right').css('color', 'red').html(j[0]).parent().addClass('has-error');
32 if(i == "__all__") {
33 $("#id_repeat_pwd").next().addClass("pull-right").css("color", "red").html(j[0]).parent().addClass("has-error");
34 $("#id_pwd").parent().addClass("has-error");
35 }
36 })
37 }
38 }
39 })
40 })