我目前有一个相当标准的网络表单，用户输入名称，电话号码，职位等，然后一旦他们按下提交数据保存到数据库，并保存到那里的配置文件，以便他们可以在需要时更新它 .
我想在表单中添加一个功能，允许用户上传图片作为头像，并且还能够将图像裁剪为我们指定的尺寸 .
我正在尝试在此表单中实现jquery插件http://fengyuanchen.github.io/cropper/ . 我正在使用位于该页面底部的演示代码 . 此代码创建一个模态窗口，用户可以在其中上传图像，根据需要裁剪，然后单击“完成”将文件上载到服务器 .
我遇到的问题是，裁剪器网站的代码在模态窗口中创建了一个表单，该表单位于用户输入详细信息的站点上已存在的表单内 . 我意识到你不能在表单中有一个表单，这意味着当用户在模态窗口中上传图像然后单击“完成”时，它会同时保存两个表单 .
我如何将此模态窗口放在此用户表单中？我希望这一切都有道理，但我认为我的逻辑如下：
-
单击头像按钮
-
加载模态窗口
-
用户选择要上传的图像 .
-
用户选择如何裁剪图像 .
-
在模态窗口中完成用户点击，图像上传到服务器 . 模态窗口关闭
-
用户填写剩余的用户表单，并将数据与刚刚上传的图像的新URL一起发送到数据库 .
有人能指出我正确的方向或给我任何关于我缺少的提示吗？
谢谢
1 回答
你正在寻找像dropzone js这样的东西，它是跨浏览器，并做你需要的
干杯