Javascript 上传图像，然后使其可移动和调整大小

我正在尝试制作一个图像上传器，上传后，让它可以移动和调整大小。我有两个jquery脚本，我可以上传一个图像，移动/调整另一个，但不能一起使用

上载程序：

<div class="upload">
<input type='file' onchange="readURL(this);" /> <br>
</div>

<div class="block">
<div id="background">
<img id="bg" src="" alt="" width="auto" height="50%"/>
</div>
</div>

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#bg')
.attr('src', e.target.result);
};
reader.readAsDataURL(input.files[0]);
}
}

函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（“#bg”）
.attr（'src'，e.target.result）；
};
reader.readAsDataURL（input.files[0]）；
}
}

使另一个图像可调整大小并可移动：

$(document).ready(function () {
$(document).on('click', '.block-add', function () {
var a = $(this);
var src = a.find('img:first').attr('src');
var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});

$（文档）.ready（函数（）{
$（文档）。在（'单击'，'上。阻止添加'，函数（）{
var a=$（本）；
var src=a.find（'img:first'）.attr（'src'）；
变量元素=$（''）；
$（'.block'）.append（elem）；
元素draggable（）；
elem.find（'.blocks:first'）.resizeable（）；
返回false；
});
});

---

它可以单独工作，但是如果我想将其上传到上传的图像中，图像就不会出现。

您要执行的操作有点混乱

---

首先，决定你要做什么？如果是我的话，我会使用类似或用于生产的库，以便将其存储在后端。

我真的不想使用其他任何东西，只想使用jquery。我发现，我可以使用

$（function（）{$（“#bg”）.draggable（）；}）使其可拖动但是`$（函数（）{$（“#bg”）.resizeable（）；}）`如果我使用这个功能，我甚至看不到上传的图片。