现有用户表单中的图片上传。 Cropper Jquery插件。

Question

我目前有一个相当标准的网络表单，用户可以在其中输入姓名，电话号码，职位等，然后一旦他们按下提交，数据就会保存到数据库中，并保存到那里，这样他们就可以更新了他们也需要。

我想在表单中添加一个功能，允许用户将图片上传为头像，并且还能够将图像裁剪为我们指定的尺寸。

我正在尝试在此表单中实现jquery插件http://fengyuanchen.github.io/cropper/。我正在使用位于该页面底部的演示代码。此代码创建一个模态窗口，用户可以在其中上传图像，根据需要裁剪，然后单击“完成”将文件上载到服务器。

我遇到的问题是，裁剪器网站的代码在模态窗口中创建了一个表单，该表单位于用户输入详细信息的站点上已存在的表单内。我意识到你不能在表单中有一个表单，这意味着当用户在模态窗口中上传图像然后单击“完成”时，它会同时保存两个表单。

我如何将此模态窗口放在此用户表单中？我希望这一切都有道理，但我认为我的逻辑如下：

1. 点击头像按钮
2. 加载模态窗口
3. 用户选择要上传的图片。
4. 用户选择如何裁剪图像。
5. 在模态窗口中完成用户点击，图像上传到服务器。模态窗口关闭
6. 用户填写剩余的用户表单，并将数据与刚上传的图像的新网址一起发送到数据库。

有人能指出我正确的方向，还是给我任何关于我缺少的提示？

由于

Answer 1

你正在寻找像dropzone js这样的东西，它是跨浏览器并做你需要的东西

干杯