Django+JS 프로필 사진 을 클릭 하면 프로필 사진 을 변경 할 수 있 는 방법 예시

8330 단어 Django 프로필 사진 변경

우선,models.py 에 User Models 클래스 를 만 듭 니 다.


from django.db import models
from django.contrib.auth.models import AbstractUser


class UserModels(AbstractUser):
  nickname = models.CharField(max_length=50, null=True, verbose_name='    ')
  mobile = models.CharField(max_length=11, null=True, verbose_name='  ')
  address = models.CharField(max_length=100, null=True, verbose_name='  ')
  sex = models.CharField(max_length=10, null=True, verbose_name='  ')
  head_img = models.ImageField(upload_to='%Y/%m', verbose_name='  ', null=True)

  class Meta:
    db_table = 'user'
    verbose_name = '  '
    verbose_name_plural = verbose_name

admin 배경 에 표시 하려 면 admin.py 파일 에 등록 해 야 합 니 다.


from django.contrib import admin
from .models import UserModels

admin.site.register(UserModels)

그리고 settings.py 에서...


AUTH_USER_MODEL = 'customuser.UserModels'
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/images')

이후,python manage.py makemigrations
python manage.py migrate 를 데이터베이스 에 동기 화 합 니 다.
그리고 나 서 두상 이 바 뀌 기 시작 했다.
urls.py 에서 연결 경로:


 path('info/', TemplateView.as_view(template_name='user/userinfo.html'), name='user_info'),
 path('headimg/', headimg, name='user_img'),

userinfo.html 에서:
html 부분:


form action="#" method="post">
    {% csrf_token %}
  </form>
  <div class="header">
    <div class="container">
      <h2>    </h2>
    </div>
  </div>
  <div class="container">
    <dl>
      <dt>  </dt>
      <dd id="file">
        <img src="/static/images/{{ request.user.head_img }}" alt="" style="border-radius: 50%; width: 100px;height: 100px;" id="img-show">
        {# input type="file"     ，        click  。type='text'           。 #}
        <input type="file" id="img-upload" style="display: none;" onchange="uploadimg()">
      </dd>

      <dt>  :</dt>
      <dd>{{ request.user.nickname }}</dd>
      <dt>  :</dt>
      <dd>{{ request.user.mobile }}</dd>
      <dt>  :</dt>
      <dd>{{ request.user.address }}</dd>
      <dt>  :</dt>
      <dd>{{ request.user.sex }}</dd>
      <dt>    :</dt>
      <dd>    ，       。</dd>
    </dl>
    <a href="{% url 'user_update' %}" rel="external nofollow" >      </a>
    <hr>
  </div>

js 부분:


{#       ，  <input type="file">     click  。#}
  <script>
    $(document).ready(function(){
      {# ready  ，   html        ，       。 #}
      {#         ？ img    click  。 onclick=""; .addEventLisenter("click", function(){}); $().click(); #}
      $('#img-show').click(function () {
        {#     Img，           。 #}
        {#     。  input     。 #}
        $('#img-upload').click();
      })
    });
    function uploadimg() {
      {#alert('      ');#}
      {#     ：         ，    ，            。 #}
      {# files:           input      。files[0]    File  ，       、     、        。 #}
      var img_file = $('#img-upload')[0].files[0];

      {#      img_file       ，            。 #}
      var reader_file = new FileReader();
      {#           img_file      #}
      reader_file.readAsDataURL(img_file);
      {#        ，reader_file                  #}
      reader_file.onload = function (ev) {
        $('#img-show').attr('src', ev.target.result);
        {#           ，                      。   views.py      head_img 。 #}
        {# ajax       django  ：    ajax       django   View。 #}
        var formdata = new FormData();
        formdata.append('img_name', img_file.name);
        formdata.append('img_file', img_file);
        {#       ，   <form>  。 #}
        {#     ajax  POST  ，         ，    csrf       。 <form>         。<input type="hidden" name="csrfmiddlewaretoken" value="nzssW2AKQg4OOth2xmYYCYQuPFEAxhkcNPW3wwLQX6CKm8LkWhusgsowh2IcARSN"> #}
        formdata.append('csrfmiddlewaretoken', '{{ csrf_token }}');
        $.ajax({
          url: '{% url 'user_img' %}',
          type: 'POST',
          data: formdata,
          {# processData：    True，    jQuery        ，            。   FALSE，       jQuery data: formdata         。 #}
          {#      ：     GET   ，username='123'&password='456' #}
          processData: false,
          {# contentType:                       。      application/x-www-form-urlencoded。      false，              formdata    。 #}
          contentType: false,
          success: function(data, status) {
            alert(data);
          }
        });
        {# 1. ajax    (  、  、  )    POST  ； #}
        {# 2.           ，   FormData()     ； #}
        {# 3. POST      cstf，ajax   <form>         ； #}
        {# 4. ajax     POST  ，        ：processData: false；contentType: false；#}
      }
    }
  </script>

views.py 에서 함수 보완:


def headimg(request):
  if request.method == 'POST':
    #   ajax  ，     、           views.py ；
    img = request.FILES.get('img_file')
    #      head_img    ，      。
    # ['2018', '10', 'h2.png']
    path = request.user.head_img.url.split('/')
    #               ，         
    path[-1] = request.POST.get('img_name')
    #            
    path = '/'.join(path)

    url = settings.MEDIA_ROOT + '/' + path

    #  ajax           /static/images/....   。
    with open(url, 'wb') as f:
      for chunk in img.chunks():
        f.write(chunk)

    #               ，                  。
    request.user.head_img = path
    request.user.save()

    return HttpResponse('      ')

다 쓴 후에 우 리 는 효 과 를 테스트 할 수 있다.
우선,creatsuperuser 사용자 이름:admin 비밀번호:admin 12345
이후 admin 을 사용 하여 admin 배경 에 로그 인하 여 일반 사용자 두 명 을 만 들 고 각각 하나의 그림 을 프로필 로 설정 합 니 다.

일반 사용 자 를 만 든 후,그 중 하나의 test 를 사용 하여 로그 인 항목 의 첫 페이지 를 진행 합 니 다:
메모:admin 배경 에서 만 든 사용자 입 니 다.비밀 번 호 는 암호 화 되 지 않 았 기 때문에 로그 인 을 설정 하 는 데 편리 합 니 다.암호 화 된 비밀 번 호 를 검사 하 는 지,암호 화 된 비밀 번 호 를 검사 하 는 지 주의해 야 합 니 다.
여기 서 제 가 설정 한 test 와 test 1 의 비밀 번 호 는 모두 admin 의 비밀번호 와 같 습 니 다.그러면 test 에 로그 인 할 때...