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)