Django如何实现图片拖拽后上传？

Question

我现在需要实现将图片拖拽至指定区域，预览并上传到Django。
现在已经实现了拖拽图片，能预览，但是无法通过input传过去

html处代码：

<form id="data" method="POST" enctype="multipart/form-data">
    <div id="box" class="drag">
        <img id="imgshow" src="" alt=""/>
    </div>
    <input name="url" id="url" style="display: none"/>
    <button id="dragSubmit" type="submit" style="display: none"></button>
</form>

js处代码：

drag.addEventListener("drop",function (event) {
    event.preventDefault();
    var file = event.dataTransfer.files[0];
    var fr = new FileReader();
    fr.readAsDataURL(file);
    fr.onload = function (event) {
        imgshow.src = this.result;
        console.log(imgshow.src);
        $("#url").val(imgshow.src);
    };
    # 下面三行代码是通过另一个button来代替点击button
    button.innerHTML = "上传图片";
    button.onclick = function () {
    dragSubmit.click()
};

传到后台的数据始终为空。求解