如何在表单上传按钮django上使用javascript

Question

我想要实现的目标：

我的要求是首先在template/html页面上显示图像，然后将其上传到数据库中，以便在我使用javascript的页面上显示该图像。

那么如何在javascript按钮中使用{{form.image}}呢？

---

其他侧面细节：

为了上传我正在使用Django表单{{form.image}}的内置按钮的图像，点击一个按钮我应该能够显示并上传图像

以下是的参考代码

form.py

from django import forms 
from .models import Boneage
class BoneageForm(forms.ModelForm): 
class Meta: 
model = Boneage 
fields = ('gender', 'age','images')

JavaScript代码

<script>
const wrapper = document.querySelector(".wrapper");
const fileName = document.querySelector(".file-name");
const defaultBtn = document.querySelector("#default-btn");
const customBtn = document.querySelector("#custom-btn");
const cancelBtn = document.querySelector("#cancel-btn i");
const img = document.querySelector("img");
let regExp = /[0-9a-zA-Z^&'@{}[],$=!-#().%+~_ ]+$/;
function defaultBtnActive(){
defaultBtn.click();
}
defaultBtn.addEventListener("change", function(){
const file = this.files[0];
if(file){
const reader = new FileReader();
reader.onload = function(){
const result = reader.result;
img.src = result;
wrapper.classList.add("active");
}
cancelBtn.addEventListener("click", function(){
img.src = "";
wrapper.classList.remove("active");
})
reader.readAsDataURL(file);
}
if(this.value){
let valueStore = this.value.match(regExp);
fileName.textContent = valueStore;
}
});
</script> 

如何在Django表单按钮中使用此java脚本代码？

{{form.images}}
<button onclick="defaultBtnActive()" id="custom-btn">  </button>