Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>

<form id='your_form_id' action="{% url "create" %}" method="post" enctype="multipart/form-data">
 {% csrf_token %}
    <input type="TEXT" name = "textt" />
    <input type='file' name='file' id='file' />
    <input type='submit' value='Upload' id='upload'/>
</form>
<div id="fileDisplayArea"></div>


<script type='text/javascript'>
var save;
window.onload = function() {

        var fileInput = document.getElementById('file');
        var fileDisplayArea = document.getElementById('fileDisplayArea');


        fileInput.addEventListener('change', function(e) {
            var file = fileInput.files[0];
            var imageType = /image.*/;

            if (file.type.match(imageType)) {
                var reader = new FileReader();

                reader.onload = function(e) {
                    fileDisplayArea.innerHTML = "";

                    var img = new Image();
                    img.src = reader.result;
                    save = img;
                    fileDisplayArea.appendChild(img);
                }

                reader.readAsDataURL(file);
            } else {
                fileDisplayArea.innerHTML = "File not supported!";
            }
        });

}


$(document).ready(function() {

     $(document).ready(function() {
         var form = $('#your_form_id');
       form.submit(function() { // catch the form's submit event
            alert("hello");
            $.ajax({ // create an AJAX call...
                data: form.serialize(), // get the form data
                type: form.attr('method'), // GET or POST
                url: form.attr('action'), // the file to call
                success: function(response) { // on success..
                   alert("Hello");
                }
            });
            return false;
        });
    });


})