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)
  • 相关阅读:
    检测单链表是否含有环
    巧用正则和document.location.search获取URL参数的值
    网站前端性能优化
    Ubuntu 10.10 wubi安装错误处理
    SQL中随机数函数rand()简介
    C#实现智能提示(提示补全)功能
    重装系统使之svn再次复活
    MongoDB安装
    mongodb查询
    解决iframe中跨域session丢失的问题
  • 原文地址:https://www.cnblogs.com/zjchao/p/9133073.html
Copyright © 2011-2022 走看看