上传文件头像的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. Mysql 索引复习笔记

    之前学习索引后由于一直没怎么用,所以也只是粗略看了一下,最近发现索引的用处很大,并且也很多知识点,在此做复习记录. 什么是索引? 百度百科是这样描述的: 索引是为来加速对表中数据行中的检索而创建的一种 ...

  2. 在myeclipse中安装svn

    首先下载site.zip,然后解压.在myeclipse的安装目录中的dropins文件夹中新建svn文件夹,把site中的features和plugins文件夹复制到svn中即可.然后重启Myecl ...

  3. 【Android压力测试】monkey压力测试

    1.首先安装adb.java环境 2.下载地址: 链接: https://pan.baidu.com/s/1i5xltpN 密码: ra6g monkey 很简单的理解是 像猴子一样一顿点乱点,看是否 ...

  4. ionic2常见问题——启动后白屏问题

    问题描述 app启动后大概有几秒白屏,才会显示首页. 解决方案 图 1-最初config.xml配置 图 2-更改后的splash配置 代码: <preference name="Sh ...

  5. 关于socket绑定INADDR_ANY

    其中INADDR_ANY就是指定地址为0.0.0.0的地址,这个地址事实上表示不确定地址,或“所有地址”.“任意地址”. 一般情况下,如果你要建立网络服务器,则你要通知服务器操作系统:请在某地址 xx ...

  6. 解决PKIX问题：unable to find valid certification path to requested target

    第一步:执行方式:java InstallCert hostname                       eg:java InstallCert www.cebbank.com 第二步:然后输 ...

  7. JAVA线程死锁

    文件名:DeadThreadByExtend.java 注: 1.起线程的时候用的是start方法,run方法也可以调用,但是仅仅相当于普通调用,在当前线程内执行. 2.synchronized 不能 ...

  8. 【解题报告】[动态规划]RQNOJ PID2 / 开心的金明

    原题地址:http://www.rqnoj.cn/problem/2 解题思路:背包问题. 状态转移方程:DP[i][j]=max(DP[i-v[j]][j-1]+p[j]*v[j],DP[i][j- ...

  9. Java中数据库连接池原理机制的详细讲解（转）

    连接池的基本工作原理 1.基本概念及原理 由上面的分析可以看出,问题的根源就在于对数据库连接资源的低效管理.我们知道,对于共享资源,有一个很著名的设计模式:资源池 (Resource Pool).该模 ...

  10. 洛谷 P2879 [USACO07JAN]区间统计Tallest Cow

    传送门 题目大意: n头牛,其中最高身高为h,给出r对关系(x,y) 表示x能看到y,当且仅当y>=x并且x和y中间的牛都比 他们矮的时候,求每头牛的最高身高. 题解:贪心+差分 将每头牛一开始 ...