[Django] 단일파일 여러개 업로드하기_ 같은 name의 다중 파일 업로드

[python django] 같은 name의 file type 여러개 파일 업로드하기_ 같은 name 다중 파일 업로드

하나의 파일을 동적으로 계속 생성해서 사용하거나

같은 name로 여러개의 file type을 생성해야될때가 있는데요.

여러개의 단일 파일의 같은 name들로 파일업로드 처리하는 방법입니다 !

소스코드 설명은 주석처리 되어있습니다.

■ test.html 소스코드

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .filebox label { display: inline-block; padding: 10px 20px; color: red; vertical-align: middle; background-color: #fdfdfd; cursor: pointer; border: 1px solid gold; border-radius: 5px; } /* named upload */ .filebox .upload-name { display: inline-block; height: 35px; font-size:18px; padding: 0 10px; vertical-align: middle; background-color: #f5f5f5; border: 1px solid #ebebeb; border-radius: 5px; } </style> <body> <form> <div class="filebox"> <label>업로드 <input type="file" name="file" style="display:none"> </label> <input type="text" class="upload-name" value="파일을 선택해주세요."> </div> </form> <form> <div class="filebox"> <label>업로드 <input type="file" name="file" style="display:none"> </label> <input type="text" class="upload-name" value="파일을 선택해주세요."> </div> </form> <form> <div class="filebox"> <label>업로드 <input type="file" name="file" style="display:none"> </label> <input type="text" class="upload-name" value="파일을 선택해주세요."> </div> </form> <form> <div class="filebox"> <label>업로드 <input type="file" name="file" style="display:none"> </label> <input type="text" class="upload-name" value="파일을 선택해주세요."> </div> </form> <br><br> <button id="test">파일전송 버튼</button> </body> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <script> // 파일 업로드 감지 -> input textbox에 경로를 넣어준다. $("input[name=file]").on('change',function(){ var fileName = $(this).val(); alert($(this).parent().parent('div').children('.upload-name').val(fileName)); }); // 파일 전송버튼 클릭 시 $("#test").on('click',function(){ alert($("input[name=file]").length); let len = $("input[name=file]").length; // file type 개수 var form_data = new FormData(); // form 생성 for (var x = 0; x < len; x++) { // file type 만큼 for문이 돌아요. // 파일이 들어있다면 파일 정보를 삽입 if($("input[name=file]")[x].files[0] != null) { form_data.append("file[]", $("input[name=file]")[x].files[0]); form_data.append("size[]", $("input[name=file]")[x].files[0].size); form_data.append("file_org[]", $("input[name=file]")[x].files[0].name); }else { form_data.append("file[]", ''); form_data.append("size[]", 0); form_data.append("file_org[]", ''); } } // ajax 부분 : url은 urls.py에 적용하는 도메인name을 쓰시면 됩니다. $.ajax({ url: 'test/', dataType: 'json', enctype: 'multipart/form-data', cache: false, contentType: false, processData: false, data: form_data, // 파일업로드가 저장된 form 데이터 전송 type: 'post', success: function(data) { alert(data.proc); }, }); }); </script> </html>

■ test.html 적용 후 runserver

위의 test.html을 복사해서 본인 개발환경에 맞게

파이썬 장고에서 실행을 하면 파일업로드 4개를 받을 수 있는 웹 화면이 나타납니다.

확인해보면 file이라는 name로 단일 파일태그가 여러개 있죠!

소스코드는 주석을 확인해보세요!!!

■ ajax의 파일 업로드 url 도메인 작성

file-upload 라는 도메인 name을 설정하고 test.html의 ajax url 부분에 추가해주었습니다.

도메인 네임이나 함수명은 본인 개발환경에 각자 맞추어 하시면 될것같습니다.

설정에서 어려움을 느끼시는 분들은 댓글 남겨주세요~^^

■ 파일 업로드 후 파일을 저장할 디렉터리 생성

파일을 받을 폴더를 추가해줍니다.

저는 media 라는 디렉터리를 사용하겠습니다 !

파일 업로드가 성공하면 media 라는 폴더에 들어가게 됩니다.

■ file_upload 메소드 소스코드(주석 참고)

import os from django.core.files.storage import FileSystemStorage from django.shortcuts import render from django.utils.decorators import method_decorator from django.http import JsonResponse from django.views.decorators.csrf import csrf_exempt import calendar import time @method_decorator(csrf_exempt) def file_upload(request): if request.method == 'POST': # 자바스크립트 배열은 getlist로 받기 file = request.FILES.getlist('file[]') if file is None: # 파일이 없다면 빠져나옴 context = {'proc': 'fail'} return JsonResponse(context) file_cnt = 0 # 파일 개수 카운트 # 첨부된 파일의 개수만큼 반복문이 돌아요 ! for i in range(len(request.POST.getlist('size[]'))): if int(request.POST.getlist('size[]')[i]) > 0: # 파일 사이즈가 0보다 크면 file_org = request.POST.getlist('file_org[]')[i] # file의 실제 name file = request.FILES.getlist('file[]')[file_cnt] # file 객체 fs = FileSystemStorage(location="media/", base_url="media/") # 파일 폴더에 저장 # 중복 파일네임 처리 ts = calendar.timegm(time.gmtime()) file_name_ext = os.path.splitext(file_org) filename = "" for idx, val in enumerate(file_name_ext): if idx == len(file_name_ext) - 1: filename += "_" + str(ts) filename += val saved_filename = fs.save(filename, file) # 파일 저장 print(saved_filename) # 파일경로 file_cnt = file_cnt + 1 # 파일이 저장되면 파일카운트 + 1 else: print("파일없음") return JsonResponse({'state': True, 'proc': 'success'})

■ 완성 및 테스트

같은 name을 가진 여러개의 단일file type의 파일 업로드입니다.

당연히 파일업로드 후 값을 비워주거나,

사이즈 제한, 확장자 제한 등 다른 밸리데이션 체크는

필요하겠지만,

지금 소스코드를 참고하여 충분히 응용할 수 있습니다.

안되는 부분들은 댓글남겨주세요~^^

[Django] 단일파일 여러개 업로드하기_ 같은 name의 다중 파일 업로드

'파이썬 웹 개발' 카테고리의 다른 글

[Python Django] 장고 pycache 제거하기_ git, __pycache__, pyc 문제 (0)	2022.02.07
[파이썬 장고] orm filter 날짜 범위로 조회하기_ 쿼리 객체 날짜 필터링 (1)	2022.01.26
[장고 쿼리셋] 자바스크립트 깨짐현상 ' _ 자바스크립트에서 파이썬 리스트 활용하기 (0)	2022.01.26
[Django] _mysql' is not defined 호환에러 해결하기 (7)	2022.01.25
파이썬 장고 orm ( OR, AND 조건 넣기) _ python django orm (0)	2021.09.28

배추잠자리 개발 RPG

[Django] 단일파일 여러개 업로드하기_ 같은 name의 다중 파일 업로드

■ test.html 소스코드

■ test.html 적용 후 runserver

■ ajax의 파일 업로드 url 도메인 작성

■ 파일 업로드 후 파일을 저장할 디렉터리 생성

■ file_upload 메소드 소스코드(주석 참고)

■ 완성 및 테스트

'파이썬 웹 개발' 카테고리의 다른 글

댓글

티스토리툴바

[Django] 단일파일 여러개 업로드하기_ 같은 name의 다중 파일 업로드

■ test.html 소스코드

■ test.html 적용 후 runserver

■ ajax의 파일 업로드 url 도메인 작성

■ 파일 업로드 후 파일을 저장할 디렉터리 생성

■ file_upload 메소드 소스코드(주석 참고)

■ 완성 및 테스트

'파이썬 웹 개발' 카테고리의 다른 글

관련글

댓글

티스토리툴바