Javascript SRC变化时的动态纵横比

我的问题是，在选择一个初始图像文件并尝试选择另一个文件后，纵横比相对于所选图像不会改变，但会保持首先选择的图像的纵横比

我希望纵横比相对于选定图像的自然纵横比动态变化。我想不出一个不丢失可调整大小部分的方法来修复它

var test=document.getElementById（'test'）；
var draggable=document.getElementById（'draggable'）；
var resizeble=document.getElementById（'resizeble'）；
var img=document.querySelector（'img'）；
img.onload=函数（）{
$（函数（）{
$（“#draggable”）.draggable（{}）；
$（“#可调整大小”）。可调整大小({
方面：img.naturalWidth/img.naturalHeight，
最大高度：200，
最大宽度：200，
身高：20，
最小宽度：20，
});
});
}
addEventListener（'load'，function（））{
document.querySelector（'input[type=“file”]”）。addEventListener（'change'，function（）{
if（this.files&&this.files[0]）{
img.src=URL.createObjectURL（this.files[0]）；
}
});
});
#可拖动{
显示：内联块；
边际：0px；
}
#可调整大小{
位置：绝对位置；
光标：移动；
边际：0px；
最大高度：200px；
最大宽度：200px；
框大小：边框框；
边界：无；
}
.测试{
宽度：300px；
高度：300px；
溢出：隐藏；
背景颜色：米色；
}
问题在于，可调整大小的小部件仅在实例化内容时读取内容的维度，而不是在内容更改时读取

要解决这个问题，您需要检查可调整大小的小部件是否已经在元素上实例化并销毁它，同时删除小部件添加到元素中的任何内联样式。然后您可以更改图像并再次初始化小部件

还要注意，如果您使用jQuery进行拖动和调整大小，那么充分利用它为选择DOM中的元素和添加事件处理程序提供的便利也是有意义的。试试这个：


$（函数（）{
变量$draggable=$（“#draggable”）；
变量$resizeable=$（“#resizeable”）；
$（'input[type=“file”]”）。在（'change'，function（）{
if（this.files&&this.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$draggable.draggable（）；
if（$resizable.hasClass（'ui-resizable'））
$resizeable.resizeable（'destroy'）.removeAttr（'style'）；
$resizeable.prop（'src'，e.target.result）。可调整大小({
最大高度：200，
最大宽度：200，
身高：20，
最小宽度：20，
});
}
reader.readAsDataURL（this.files[0]）；
}
});
});
#可拖动{
显示：内联块；
边际：0px；
}
#可调整大小{
位置：绝对位置；
光标：移动；
边际：0px；
最大高度：200px；
最大宽度：200px；
框大小：边框框；
边界：无；
}
.测试{
宽度：300px；
高度：300px；
溢出：隐藏；
背景颜色：米色；
}