Django 프로젝트 실전 사용자 프로필 업로드 및 방문 예시

8339 단어 Django두상업로드
1 서버 로 컬 에 파일 저장
upload.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
  {% csrf_token %}
  <div>   :<input type="text" name="username"></div>
  <div>  <input type="file" name="avatar"></div>
  <input type="submit" value="  ">
</form>
</body>
</html>
urls.py

from django.conf.urls import url
from app01 import views
urlpatterns = [
  url(r'^upload',views.upload)
]

views.py

from django.shortcuts import render,HttpResponse 
def upload(request):
  if request.method == 'POST':
    name = request.POST.get('username')
    avatar = request.FILES.get('avatar')
    with open(avatar.name,'wb') as f:
      for line in avatar:
        f.write(line)
    return HttpResponse('ok')
  return render(request,'upload.html')
총결산
이렇게 해서 우 리 는 기본 적 인 파일 업로드 예 시 를 만 들 었 습 니 다.여기 서 주의해 야 할 몇 가지 가 있 습 니 다.
 1.form 폼 에 csrf 를 추가 해 야 합 니 다.token 인증
 2.파일 의 input 상자 type 값 은 file
 3.보기 함수 에서 파일 을 가 져 오 려 면 request.FILES.get()방법 을 사용 해 야 합 니 다.
 4.obj.name 을 통 해 파일 이름 가 져 오기
2 파일 을 데이터베이스 에 업로드
models.py

from django.db import models
 class User(models.Model):
  username = models.CharField(max_length=16)
  avatar = models.FileField(upload_to='avatar')
views.py

def upload(request):
  if request.method == 'POST':
    name = request.POST.get('username')
    avatar = request.FILES.get('avatar')
    models.User.objects.create(username=name,avatar=avatar)
    return HttpResponse('ok') 
  return render(request,'upload.html')
총결산
위 에서 파일 을 데이터베이스 에 업로드 하 는 기능 을 실 현 했 습 니 다.주의해 야 할 것 은 몇 가지 가 있 습 니 다.
 1.데이터베이스 에 업로드 하 는 것 은 이미지 자체 나 바 이 너 리 코드 를 데이터베이스 에 두 는 것 이 아니 라 실제 적 으로 파일 을 서버 로 컬 에 업로드 하 는 것 입 니 다.데이터 베 이 스 는 파일 의 경로 만 저장 되 어 있 습 니 다.그러면 사용자 가 파일 을 호출 할 때 경 로 를 통 해 서버 가 지정 한 위 치 를 찾 을 수 있 습 니 다.
 2.ORM 을 만 들 때 avatar 필드 에 uploadto='의 속성,업로드 한 파일 을 어디 에 두 는 지 지정 합 니 다.
 3.데이터베이스 에 추가 할 때 파일 필드 속성 할당 은 일반 필드 와 형식 적 으로 같 습 니 다.예 를 들 어 models.User.objects.create(username=name,avatar=avatar)
 4.두 사용자 가 업로드 한 파일 이름 이 중복 되면 시스템 은 자동 으로 파일 이름 을 바 꿉 니 다.효 과 는 다음 과 같 습 니 다.

덧붙이다
기능 은 우리 가 파일 을 호출 할 때 데이터베이스 파일 경 로 를 통 해 저 장 된 파일 자체 만으로 도 그림 에 접근 할 수 있 는 것 처럼 보 입 니 다.사실은 그렇지 않 습 니 다.
django 를 설정 해 야 찾 을 수 있 습 니 다.그렇지 않 으 면 urls 인증 을 통과 하지 못 할 것 입 니 다.static 의 정적 파일 에 직접 접근 할 수 있 는 이 유 는 django 가 설정 해 주 었 기 때 문 입 니 다.

설정 절 차 는 다음 과 같 습 니 다.
1.사이트 의 setting.py 에서 설정

MEDIA_ROOT=os.path.join(BASE_DIR,"blog","media") #blog    ,media          

MEDIA_URL="/media/"   #  STATIC_URL  ,                
2,urls.py 에서 설정

from django.views.static import serve
from upload import settings        #upload    
url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),
설정 이 끝나 면 통과 할 수 있 습 니 다.http://127.0.0.1:8001/media/milk.png그림 에 접근 하 였 습 니 다. 
3.AJAX 로 파일 제출
upload.html

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
<form>
  {% csrf_token %}
  <div>   :<input id="name-input" type="text"></div>

  <div>  <input id="avatar-input" type="file"></div>
  <input id="submit-btn" type="button" value="  ">
</form>
<script src="/static/js/jquery-3.2.1.min.js"></script>
<script>
  $('#submit-btn').on('click',function () {
    formdata = new FormData();
    formdata.append('username',$('#name-input').val());
    formdata.append("avatar",$("#avatar")[0].files[0]);
    formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val()); 
 $.ajax({
 processData:false,contentType:false,url:'/upload', type:'post', data:formdata,success:function (arg)
 { 
if (arg.state == 1){ alert('  !') }
else { alert('  !') } } }) });
 </script>
 </body> 
</html>
views.py

from django.shortcuts import render,HttpResponse
from django.http import JsonResponse
from app01 import models
def upload(request):
  if request.method == 'POST':
    name = request.POST.get('username')
    avatar = request.FILES.get('avatar')
    try:
      models.User.objects.create(username=name,avatar=avatar)
      data = {'state':1}
    except:
      data = {'state':0}
    return JsonResponse(data)
  return render(request,'upload.html')
총결산
1.Ajax 가 업로드 할 때 버튼 의 tpye 는 submit 를 사용 하지 마 세 요.
2.Ajax 가 업로드 할 때 data 인자 의 값 은 일반'사전'형식의 값 이 아니 라 FormData 쌍 상 입 니 다.
  • 생 성 대상 formdata=new FormData(); 
  • 값 formdata.append('username',$('\#name-input').val()를 안쪽 에 추가 합 니 다
  • 3.Ajax 는 post 제출 을 할 때 csrf 인증 을 추가 해 야 합 니 다.
  • formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
  • 4.마지막 으로 Ajax 가 파일 을 업로드 할 때 두 개의 인자 설정 이 있어 야 합 니 다.
  • processData:false
  • contentType:false
  •  4 사진 파일 업로드 시 미리 보기 기능
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
    </head>
    <body>
    <form>
      <!----   label                 ,
                              ---->
      <label><img id="avatar-img" src="/static/img/default.png" width="80px" height="80px">
        <div>  <input id="avatar-input" hidden type="file"></div>
    
      </label>
      <input id="submit-btn" type="button" value="  ">
    </form>
    <script src="/static/js/jquery-3.2.1.min.js"></script>
    <script>
      //       (label    )    
      $('#avatar-input').on('change',function () {
        //              
        var choose_file=$(this)[0].files[0];
        //       FileReader  ,        
        var reader=new FileReader();
        //             
        reader.readAsDataURL(choose_file);
        //       ,    src                 
        reader.onload=function () {
           $("#avatar-img").attr("src",reader.result)
        }
      });
    </script>
    5 대 총결산
    파일 업로드 에 대해 서 는 직접 form 으로 제출 하 든 Ajax 로 제출 하 든 기본 적 인 문 제 는 브 라 우 저 에 게 일반적인 문자열 이 아 닌 파일 을 업로드 하 라 는 것 입 니 다.
    브 라 우 저 에 어떻게 알려 드릴 까요?체중 을 요청 하 는 ContentType 인 자 를 통 해 일반적인 문자열 을 업로드 할 때 기본 값 이 있 기 때문에 지정 하지 않 아 도 됩 니 다.
    파일 을 전송 하려 면 따로 지정 해 야 한다.다음 과 같은 몇 가 지 를 총괄 하 다
     1.form 폼 을 올 리 면 enctype="multipart/form-data"를 통 해 ContentType 을 지정 합 니 다.
     2.ajax 가 올 리 면 통과.  processData:false 와 contentType:false 로 ContentType 을 지정 합 니 다.
     3.form 을 업로드 할 때 파일 데 이 터 는탭 을 통 해'패키지'데 이 터 를 표시 합 니 다.
     4.ajax 업로드 시 FormData 인 스 턴 스 대상 을 통 해 데 이 터 를 추가 하고 전달 할 때 이 대상 을 전달 하면 됩 니 다.
     5.데 이 터 를 전달 한 후 request.FILES 에 봉 인 됩 니 다.request.POST 가 아 닙 니 다.
    이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

    좋은 웹페이지 즐겨찾기