끌어서 놓기 기능으로 AJAX 파일 업로더 확장

6653 단어 javascriptbeginnersdjangopython
안녕하십니까,

에서 우리는 AJAX를 사용하여 Django 서버에 청크별로 파일 청크를 업로드하는 방법을 보았습니다. 꽤 좋은 방법이지만 여전히 대부분의 사이트에서는 사용자가 파일을 페이지에 직접 끌어다 놓고 파일을 찾아볼 수 있는 옵션과 함께 결과 작업을 수행할 수 있습니다.

개인적으로 드래그 앤 드롭 기능을 좋아합니다. 더 나은 사용자 경험도 제공합니다. 이 기사에서는 이 놀라운 기능을 기존 업로더에 추가하는 방법을 살펴보겠습니다. 시간을 낭비하지 않고 코드부터 시작하겠습니다.

Here은 지난 글에서 생성한 파일 업로더의 코드입니다. 여기에서 직접 계속하거나 AJAX 및 DJANGO의 기본 사항을 탐색하는 데 관심이 있는 경우 를 방문할 수 있습니다.

끌어서 놓기 기능을 구현하기 위해 기존 코드에 코드를 더 추가할 것입니다.

업로드.html



D&D의 가장 기본적인 것은 사용자가 파일을 릴리스할 수 있는 드롭존입니다. 드롭 영역의 경우 div를 만들고 CSS를 추가합니다.

이것은 업데이트된 템플릿 파일입니다.

{% load static %}
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
        crossorigin="anonymous">
    <title>AJAX + DJANGO File Uploader</title>
    <link rel="stylesheet" href="{% static 'css/app.css' %}">
</head>
<body>
    <div class="col-lg-6 col-md-6" style="margin: 100px auto; display: block;">
        // drop zone
        <div class="drop-box" id="dropBox" style="width: 100%; height: 400px; border: 4px dashed gray;" >
            <p style="text-align: center; vertical-align: middle; line-height: 400px; font-size: 24px; color: gray;">Drag & Drop to Upload File</p>
        </div>
        <form enctype="multipart/form-data" method="POST" action="" style="text-align: center;">
            <p style="color: gray; padding-top: 20px;">or</p>
            {% csrf_token %}
            <div class="form-group">
                <label>Select file to upload.</label>
                <input type="file" class="form-control" id="fileupload" placeholder="Select file">
            </div>
            <input type="submit" value="Upload" id="submit" class="btn btn-success">     
        </form>
        <div id="uploaded_files"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="{% static 'js/app.js' %}"></script>
</body>
</html>

이것이 이제 UI가 나타나는 방식입니다.


이제 사용자는 자신의 파일을 놓을 수 있는 지점을 갖게 되었습니다. 마음속에 떠오르는 질문은 다음과 같을 수 있습니다. 사용자가 드롭 영역에 진입했음을 코드에서 어떻게 알 수 있습니까? 우리의 코드는 사용자가 드롭 영역에 파일을 떨어뜨렸다는 것을 어떻게 알 수 있습니까? 정확한 목적을 위해 JavaScript/jQuery는 이벤트를 도입했습니다. 이벤트는 버튼의 클릭 이벤트와 같이 특정 동작이 발생하기를 기다리는 것입니다.

사용자 작업을 지속적으로 수신할 드롭 영역에 일부 이벤트를 바인딩하기만 하면 됩니다. 필요한 이벤트는 다음과 같습니다.
  • dragenter : 사용자가 드롭 영역에 들어가면 이 이벤트가 시작됩니다
    • .
  • dragover : 이 이벤트는 사용자가 드롭 영역 위로 이동하면 시작됩니다
    • .
  • 드롭: 이 이벤트는 사용자가 파일을 드롭 영역에 드롭하면 시작됩니다
    • .

    이것으로 더 많은 이벤트가 있지만 현재 필요한 것은 이것이 전부입니다.

    app.js



    ...
ondragenter = function(evt) {
    evt.preventDefault();
    evt.stopPropagation();
};

ondragover = function(evt) {
    evt.preventDefault();
    evt.stopPropagation();
};

ondrop = function(evt) {
    evt.preventDefault();
    evt.stopPropagation();
    const files = evt.originalEvent.dataTransfer;
    var uploader = new FileUpload(files);
    uploader.upload();
};

$('#dropBox')
    .on('dragover', ondragover)
    .on('dragenter', ondragenter)
    .on('drop', ondrop);

    보시다시피 ondragenter, ondragover 및 ondrop이라는 세 가지 기능을 만들었습니다. 또한 우리는 그것들을 이벤트로 바인드했습니다. 브라우저의 기본 동작을 취소해야 하며 preventDefault() 및 stopPropagation()을 사용하여 이를 달성할 수 있습니다.

    사용자가 파일을 드롭하면 "event.originalEvent.dataTransfer"에 저장됩니다. 여기에서 검색하기만 하면 됩니다. 파일 배열을 반환합니다.

    다음은 FileUpload 클래스의 인스턴스를 만들고 파일 개체를 매개 변수로 사용하여 업로드 메서드를 호출하는 것입니다. 기존 코드는 파일을 서버에 업로드합니다.

    이것은 출력의 몇 가지 스냅샷입니다.



    여기에서 전체 코드를 찾을 수 있습니다.


    슈밤크샤트리아25 / AJAX-파일-업로더


    AJAX 요청 및 응답 주기를 사용하여 Django 서버에 청크 단위로 파일을 업로드할 수 있는 파일 업로더입니다.





    AJAX 파일 업로더


    코드 연습을 원할 경우를 대비하여 이 프로젝트의 블로그 링크입니다.

    설치되지 않은 경우 로컬 컴퓨터에 django를 설치합니다.

    pip install django

    프로젝트를 실행합니다.

    python manage.py runserver

    아래는 웹앱의 모습입니다.







    View on GitHub


    이것이 오늘 새로운 것을 배우는 데 도움이 되기를 바랍니다. 소중한 시간 내주셔서 감사합니다.

    안녕!
    [Android6.0] [RK3399] PCIe 인터페이스 4G 모듈 EC20 디버그 레코드
    파일을 전송하지 않을 때 무엇이 전송되는가?

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage