上传文件头像的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. Python jieba 分词

    环境 Anaconda3 Python 3.6, Window 64bit 目的 利用 jieba 进行分词,关键词提取 代码 # -*- coding: utf-8 -*- import jieba ...

  2. [JavaScript]对象创建方法

    1.使用Object或对象字面量创建对象 (1)使用Object创建对象 var cat= new Object(); cat.name = "Tom"; cat.color= & ...

  3. （http请求+cookie）的交互流程

    如果步骤5携带的是过期的cookie或者是错误的cookie,那么将认证失败,返回至要求身份认证页面. 当前 Cookie 有两个版本:Version 0 和 Version 1.通过它们有两种设置响 ...

  4. cassandra压力测试

    http://docs.datastax.com/en/archived/cassandra/2.2/cassandra/tools/toolsCStress.html?hl=stress Simpl ...

  5. opencv:图像的掩码操作

    示例代码: #include <opencv.hpp> using namespace cv; int main() { Mat src = imread("005.jpg&qu ...

  6. 软工作业-Wc

    Wc.exe wc.exe是一个常见的工具,它能统计文本文件的字符数.单词数和行数.这个项目要求写一个命令行程序,模仿已有wc.exe 的功能,并加以扩充,给出某程序设计语言源文件的字符数.单词数和行 ...

  7. hibernate validate验证框架中@NotEmpty、@NotbBank、@NotNull的区别

    Hibernate Validator验证框架中@NotEmpty.@NotBlank.@NotNull 的区别 Hibernate Validator验证框架中@NotEmpty.@NotBlank ...

  8. 背景色与WM_ERASEBKGND

    1.背景模式 SetBkMode(TRANSPARENT/OPACITY) 用来反应文字,图形与窗口背景交互混合模式.透明则表示文字背景与窗口背景之间透明,互不干扰. 2.背景颜色 SetBkColo ...

  9. 星火计划ROS机器人Spark

    星火计划ROS机器人Spark 1 http://wiki.ros.org/Robots/Spark 2 https://github.com/NXROBO/spark ---- Spark Spar ...

  10. 再读《Java编程思想 》

    前段时间在豆瓣上无意间看到一个帖子"我为什么把thinking in java 读了10遍",是11年的帖子,下面评论至今,各种声音都有,不过大多数还是佩服和支持的.我个人来讲也是 ...