上传文件头像的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. 资源（GitHub）

    angular 文档 https://angular.cn/docs/ts/latest/quickstart.html   http://sc.qq.com/fx/u?r=OfFE5AA ios h ...

  2. mysql数据库优化课程---11、mysql普通多表查询

    mysql数据库优化课程---11.mysql普通多表查询 一.总结 一句话总结:select user.username,user.age,class.name,class.ctime from u ...

  3. Linux 任务控制(bg job fg nohup &) (转)

    常用命令 & 将指令丢到后台中去执行[ctrl]+z 將前台任务丟到后台中暂停jobs 查看后台的工作状态fg %jobnumber 将后台的任务拿到前台来处理bg %jobnumber 将任 ...

  4. Android DDMS ADB启动失败错误解决！

    ADB server didn't ACK && make sure the plugin is properly configured! adb启动失败一般是端口被占用! 解决方法和 ...

  5. 百度之星2017初赛A-1006-度度熊的01世界

    度度熊的01世界 Accepts: 967 Submissions: 3064 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/3 ...

  6. Gradle 一（Android）

    参考一:Gradle 完整指南(Android) 参考二:深入理解Android(一):Gradle详解 参考三:Gradle for Android 第一篇( 从 Gradle 和 AS 开始 ) ...

  7. 【C#】Socket中的ssl通信

    引言    有个项目中用到了Socket ssl通信,在此记录一下. 证书 Socket ssl需要用到证书用来校验身份,而作为调试,我们只需用测试证书即可. 有个工具可以很方便地制作测试证书,下载地 ...

  8. 学习window.open()及问题分析

    以前对window.open()理解的不透彻,最近因为产品需要,重新学习了一下,以下为一些收获和问题总结: 调用方式:window.open(url , winName , style); url:弹 ...

  9. Some Interview Questions About Python

    一大波超链接即将袭来 Django认证流程 Python实现阶乘 Python文件处理 Python统计日志文件IP出现次数 JSON数据解析 JSON数据解析2 买卖股票的最佳时期 读取一个大文件比 ...

  10. Lua基础---流程控制语句

    Lua提供了if语句和if else语句作为流程控制语句,当然,符合C的特点,流程语句之间可以实现嵌套操作,当然流程控制也可以和循环体结合进行控制. 1.if语句 if(布尔表达式) then --[ ...