上传文件头像的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 })