Ajaxでrequest.FILESのデータを送りたい

前提・実現したいこと

ファイルを選択（複数可）し、ファイルが入力されていたらis_valid内の処理をAjaxで行いたいです。
is_valid内の処理は出来ています。
問題なのはHTML(template)の記述になります。

発生している問題・エラーメッセージ

私が行いたい処理だと読み込んだファイルをAjax処理時に送らないといけないのですが
私の記述だとファイルを渡すようにはなっていないようです。。
FormDataオブジェクトを使用すれば良いということまでは調べれたのですが
javaScriptの知識が乏しく良くわかりません。

分かる方教えて頂けますでしょうか。
よろしくお願いいたします。

template
1<div>
2    <form action="{% url 'index_webedi'%}" method="post" enctype="multipart/form-data">
3    {% csrf_token %}
4    
5        <div class="upload-area">            
6            {{ form }}
7            <br>
8            <br>
9            <button class="btn btn-primary mt-1" id="submit-btn">アップロード</button>            
10        </div>
11    <br>
12    </form>
13
14    <div id="result">
15    <!-- Will be replaced with inputed text by Ajax -->
16    </div>
17
18    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
19    <script>
20
21        function getCookie(name) {
22            var cookieValue = null;
23            if (document.cookie && document.cookie !== '') {
24                var cookies = document.cookie.split(';');
25                for (var i = 0; i < cookies.length; i++) {
26                    var cookie = jQuery.trim(cookies[i]);
27                    // Does this cookie string begin with the name we want?
28                    if (cookie.substring(0, name.length + 1) === (name + '=')) {
29                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
30                    break;
31                    }
32                }
33            }
34        return cookieValue;
35        }
36
37        var csrftoken = getCookie('csrftoken');
38
39        function csrfSafeMethod(method) {
40            // these HTTP methods do not require CSRF protection
41            return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
42        }
43
44        $.ajaxSetup({
45            beforeSend: function (xhr, settings) {
46                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
47                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
48                }
49            }
50        });
51
52    // 送信ボタンにイベントリスナーを設定。内部に Ajax 処理を記述
53    $("form").submit(function(event) {
54        event.preventDefault();
55        var form = $(this);
56        $.ajax({
57            url: form.prop("action"),
58            method: form.prop("method"),
59            data: form.serialize(),
60            timeout: 10000,
61            dataType: "text",
62        })
63        .done(function(data) {
64            $("#result").append("<p>" + data + "</p>");
65        })
66    });
67    </script>

forms
1from django import forms
2
3class UploadFileForm(forms.Form): 
4    file_field = forms.FileField(
5        label='',
6        widget=forms.ClearableFileInput(attrs={'multiple': True}))