How to catch file size before uploading to server?

Question

JavaScript

Found this code

<input type="file" id="loadfile" />
<input type="button" value="find size" onclick="findSize()" />
<script type="text/javascript">
    function findSize() {
        var fileInput = $("#loadfile")[0];

        alert(fileInput.files[0].size); // Size returned in bytes.
    }
</script>

but i use django and use in models to load images like this models.ImageField(upload_to='static/photo')
and in html it looks something like this

<form enctype="multipart/form-data" action="albompho" method="post">
                                {% csrf_token %}
                                {{ phal }}
                                <input class="button" type="submit" value="Завантажити">
                            </form>

How can I attach to {{ phal }} id so that I can catch the file size? or advise a more up to date way for Django

Answer 1

Look at the final code of the page. The field already has an ID. Junga itself adds it by default. For example, if the field is called file, then its id will be id_file.