zoukankan      html  css  js  c++  java
  • django头像上传详解

    使用form组件上传头像

    实现的效果如下:

    将默认的上传文件框隐藏起来变成了一个默认的头像

    而且可以点击上传

    处理步骤

    avatar = forms.FileField(
                 widget = widgets.FileInput(attrs={"class": "form-control","style":"display:none"}),
            label='头像',
            error_messages={
                'required':'需要上传'
            }
    
        )

    给file  ipput绑定onchange事件,然后取到文件对象,通过阅读器阅读,文件上传时候要利用FormData()对象来上传

     $(':file').change(function () {
            var file_obj = $(this)[0].files[0];
            var file_Read = new FileReader();
           file_Read.readAsDataURL(file_obj);
            file_Read.onload=function (){
                    $("#avatar_img").attr('src',this.result)
            }
            });
    
        $("form button").click(function () {
            var username = $("id_username").val();
            var form_datas = new FormData();
            $.each($('input'), function (i, k) {
                form_datas.append($(this).attr('name'), $(this).val())
            });
            form_datas.append('avatar', $("[type='file']")[0].files[0]);
            //form_datas.append($('form').serialize());
            $.ajax({
                url: '',
                type: 'post',
                data: form_datas,
                contentType: false,
                processData: false,
                success: function (data) {
                    if (data.is_success) {
                        location.href = '/login/'
                    }
                    else {
                        var $inputs = $('input');
                        $inputs.parent().next().text('');
                        var d1 = data.message;
                        $inputs.each(function () {
                            if ($(this).attr('name') in d1) {
                                var temp = d1[$(this).attr('name')][0];
                                $(this).parent().next().text(temp)
                            }
                        })
    
                    }
                }
            })
        });
    生成头像预览

    后台取数据

      f_obj = request.FILES.get('avatar')
    Userinfo.objects.create_user(**form_obj.cleaned_data,avatar=f_obj)
  • 相关阅读:
    Spring MVC笔记(二) Hello World实例
    Spring MVC笔记(一) Spring MVC概述
    正则表达式在python中的应用
    Spring与Ibatis整合入门
    Spark GraphX的函数源码分析及应用实例
    Python爬虫获取迅雷会员帐号
    Linux Shell编程学习笔记
    Hadoop在linux下无法启动DataNode解决方法
    Ubuntu中使用终端运行Hadoop程序
    Hadoop2.6.0在Ubuntu Kylin14.04上的配置
  • 原文地址:https://www.cnblogs.com/zjchao/p/9133073.html
Copyright © 2011-2022 走看看