上传文件头像的2种方法，简单实例来看下用法

　　用法定义，fromdata可以传输任何数据

 HttpRequest.FILES

 　　一个类似于字典的对象，包含所有的上传文件信息。

    FILES 中的每个键为<input type="file" name="" /> 中的name，值则为对应的数据。

 　　注意，FILES 只有在请求的方法为POST 且提交的<form> 带有enctype="multipart/form-data" 的情况下才会

    包含数据。否则，FILES 将为一个空的类似于字典的对象。

创建 dango app01项目 没有数据库

　　1. urls 代码如下

 urlpatterns = [

     url(r'^admin/', admin.site.urls),

     url(r'^index/', views.index), 通过from表单提交文件头像

     url(r'^indexAjax/', views.indexAjax),  通过fromdata提交文件头像

 ]

　　2. views 代码如下

 from django.shortcuts import render,HttpResponse

 # Create your views here.

 def index(request):

     '''

     通过from表单提交文件

     :param request:

     :return:

     '''

     if request.method == 'POST':

         # print(request.body)

         # print(request.POST) # <QueryDict: {'csrfmiddlewaretoken': ['2Fq1vmv59yRSUxDwlkym3qmk5bNpfdHLGzbTgveW5sdjPvTvRsuXRv6IQc7yENBN'], 'user': ['yuan'], 'cFile': ['day76.txt']}>

         print(request.FILES)  # <MultiValueDict: {'cFile': [<InMemoryUploadedFile: qq.png (image/png)>]}>

         # 拿到文件对象

         file_obj=request.FILES.get("cFile")

         print(type(file_obj)) # 这个图片对象  <class 'django.core.files.uploadedfile.InMemoryUploadedFile'>

         # 文件名字

         name=file_obj.name  文件对象自带属性

         print(name)  # day76.txt

         # 保存在本地

         import os

         from filePut import settings

         path=os.path.join(settings.BASE_DIR,"app01","static",name)

         with open(path,"wb") as f_write:

             for line in file_obj:

                 f_write.write(line)

         return HttpResponse(name)

     return render(request,"index.html")

 def indexAjax(request):

     '''

     通过ajax上传文件

     :param request:

     :return:

     '''

     if request.is_ajax() or request.method == 'POST':

         # print(request.body)

         # print(request.GET)

         #

         # print(request.POST)

         # print(request.FILES)

         # 拿到文件对象

         file_obj=request.FILES.get("cFile")

         print(file_obj)

         # 文件名字

         name = file_obj.name  对象自带属性

         print(name)  # day76.txt

         # 保存本地

         import os

         from filePut import settings

         path=os.path.join(settings.BASE_DIR,"app01","static",name)

         with open(path,"wb") as f_write:

             for line in file_obj:

                 f_write.write(line)

         return HttpResponse(name)

     return render(request,'index.html')

　　3. 前端代码如下

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js "></script>

 </head>

 <body>

 {# from提交文件 #}

 {#enctype="multipart/form-data">#} 关键 ############ 没有这句话，相当于提交的是k,value字符串

 {#<form action="/index/" method="post" enctype="multipart/form-data">#}

 {#     {% csrf_token %}#}

 {#    <p>姓名： <input type="text" name="user"></p>#}

 {#    <p>文件： <input type="file" name="cFile"></p>#}

 {#    <input type="submit">#}

 {#</form>#}

 {# ajax提交文件，注意提交不能是个按钮它会直接就会提交#}

 {#$formData.append#}

     {% csrf_token %}

 {#    <p>姓名： <input type="text" id="user"></p>#}

     <p>文件： <input type="file" id="cFile"></p>

     <input type="button" value="提交" id="anniu">

 <script>

     $("#anniu").click(function () {

         var $formData=new FormData() ;

 {#        $formData.append("user",$("#user").val());#}

         file = $("#cFile")[0].files[0];queryset == query[0](对象，input标签) == query[0].files(input标签内文件) == files[0](最新文件)

         $formData.append("cFile",file);

         $.ajax({

             url:"/indexAjax/",

             type:"POST",

             data:$formData,

             contentType:false,    // 文件类型不错处理 ###########################注意

             processData:false,    // 不对数据做预处理，不进行任何编发 声明当前的data数据是否进行转码或预处理，默认为true，即预处理 #############注意

             headers:{"X-CSRFToken":$('[name="csrfmiddlewaretoken"]').val()},

             success:function (data) {

                 console.log(data)

             }

         })

     })

 </script>

 </body>

 </html>

通过注册，来看看ajax fromdata用法，还有就是预览头像方法

　　1. 定义盒子，选择文件头像

 {#                头像#}

                 <div class="form-group">

                     <label for="avatar">头像：</label>

 {#                    先定义一个存储头像的盒子#}

                     <div class="avatar_box">

 {#                        定义一个图片img#}

                         <img src="/static/img/default.png" alt="头像" id="avatar_img">

 {#                        这里需要去除验证错误的红，继承了form-group最好单写id#}

                         <input type="file" id="avatar_file" class="form-group">

 {#                        定义一个input标签上传文件#}

                     </div>

                 </div>

　　2. 发生change事件的时候，就会触发拿到上传的这个文件对象，等待这个文件加载到input框后，将这个选中文件路径给予img 的 src 来实现预览

 {#    头像预览#}

     $('#avatar_file').change(function () {

         console.log('');

 {#        上传文件对象#}

        var file = $(this)[0].files[0];

 {#       读取文件的url#}

         console.log(file);

        var reader = new FileReader();

        reader.readAsDataURL(file);

 {#       阅读完全后触发事件#}

        reader.onload = function () {

 {#           预览头像就是给头像一个源文件#}

            console.log(this.result);

 {#           读取的URL结果 this.result#}

            $('#avatar_img').attr('src',this.result)

        }

     });

　　

　　总结出一点，就是无论文件还是图片，通过input类型file传，这时候拿到对象   var file_obj = $(this)[0].files[0];

　　2. ajax 提交 fromdata 实现注册

 {#    AJAX提交注册表单，注册用户 #}

     $(".regBtn").click(function () {

         var $formData = new FormData(); #  FormData 实例 封装成的字典

         $formData.append('user',$('#id_user').val());

         $formData.append('pwd',$('#id_pwd').val());

         $formData.append('repeat_pwd',$('#id_repeat_pwd').val());

         $formData.append('email',$('#id_email').val());

         $formData.append('valid_code',$('#id_valid_code').val());

         var file = $('#avatar_file')[0].files[0];

         $formData.append('valid_img',file);

         $formData.append('csrfmiddlewaretoken',$("[name='csrfmiddlewaretoken']").val());

         $.ajax({

             url: "/register/",

             type: "POST",

             data: $formData,     // 将封装的数据打包传送到前端

             processData:false,   // 不做转码或预处理

             contentType:false,   // 文件类型不做处理

             success: function (data) {

                 if (data.user) {

                     location.href = '/login/'

                 }

                 else {

                     $('span').html('');

                     $(".form-group").removeClass("has-error");

                     console.log(data.errors);

                     $.each(data.errors,function (i,j) {

                         $("#id_" + i).next().addClass('pull-right').css('color', 'red').html(j[0]).parent().addClass('has-error');

                         if(i == "__all__") {

                             $("#id_repeat_pwd").next().addClass("pull-right").css("color", "red").html(j[0]).parent().addClass("has-error");

                             $("#id_pwd").parent().addClass("has-error");

                         }

                     })

                 }

             }

         })

     })

django-上传文件 fromdata（头像实例）的更多相关文章

  1. (转)django上传文件

    本文转自:http://www.cnblogs.com/linjiqin/p/3731751.html 另:  本文对原文做了适当修改 更为详细的介绍可以参考官方文档. emplate html(模板 ...

  2. django上传文件

    template html(模板文件): <form enctype="multipart/form-data" method="POST" action ...

  3. 实现简单的django上传文件

    本文用django实现上传文件并保存到指定路径下,没有使用forms和models,步骤如下: 1.在模板中使用form表单,因为这个表单使用于上传文件的,所以method属性必须设置为post,而且 ...

  4. 20-1 django上传文件和项目里上传头像如何查看

    一 普通上传方式 1 views def upload(request): if request.method == "POST": # print(request.POST) # ...

  5. Django上传文件和上传图片(不刷新页面)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Django上传文件的那些参数

    # ################## 默认文件上传配置 ######################## from django.core.files.uploadhandler import M ...

  7. Django上传文件的两种方式

    基于form表单上传文件 HTML <h3>基于form表单的上传文件</h3> <form action="" method="post& ...

  8. 一个Jmeter模拟上传文件接口的实例

    资料参考:https://blog.csdn.net/u010390063/article/details/78329373 项目中,避免不了要用到很多上传文件.图片的接口,那么碰到这类接口该如何进行 ...

  9. 【python】django上传文件

    参考:https://blog.csdn.net/zahuopuboss/article/details/54891917 参考:https://blog.csdn.net/zzg_550413470 ...

  10. Python - Django - 上传文件

    upload.html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. d3.js学习笔记（五）——将数据结构化为D3.js可处理的

    目标 在这一章,你将会理解如何对数据进行结构化,来更好的使用D3.js. 我们将会回顾我们之前已经学习的,学习D3.js如何使用选集(selections),JavaScript对象基础,以及如何最优 ...

  2. SimpleDateFormat函数语法

    SimpleDateFormat函数语法:         G 年代标志符         y 年         M 月         d 日         h 时 在上午或下午 (1~12)  ...

  3. IOS-MapKit

    一.MapKit框架的使用 MapKit框架使用须知 MapKit框架中所有数据类型的前缀都是MK MapKit有一个比较重要的UI控件 :MKMapView,专门用于地图显示   跟踪显示用户的位置 ...

  4. YCSB benchmark测试mongodb性能——和web服务器测试性能结果类似

    转自:http://blog.sina.com.cn/s/blog_48c95a190102v9kg.html         YCSB(Yahoo! Cloud Serving Benchmark) ...

  5. 常见CSS浏览器兼容性问题与解决方案【转载自http://blog.csdn.net/chuyuqing/article/details/37561313/】

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  6. 【转载】Git，Github和Gitlab简介和基本使用Gitlab安装和使用

    http://blog.csdn.net/u011241606/article/details/51471367

  7. SpringCloud教程 | 第九篇: 服务链路追踪(Spring Cloud Sleuth)

    版权声明:本文为博主原创文章,欢迎转载,转载请注明作者.原文超链接 ,博主地址:http://blog.csdn.net/forezp. http://blog.csdn.net/forezp/art ...

  8. 【机器学习基石笔记】九、LinearRegression

    [一] 线性回归直觉上的解释 得到Ein = mean(y - wx)^2 [二] w的推导 Ein = 1/N || xw - y||^2 连续.可微.凸函数 在各个方向的偏微分都是0 Ein = ...

  9. HihoCoder 1097 kruscal

    最小生成树二·Kruscal算法 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 随着小Hi拥有城市数目的增加,在之间所使用的Prim算法已经无法继续使用了——但是幸运的 ...

  10. 重温CLR（三）类型基础

    所有类型都从System.Object派生 “运行时”要求每个类型最终都要从System.Object类型派生.也就是说,一下两个类型的定义完全一致. //隐式派生自Object class Empl ...