上传表格中的图像以允许用户在提交之前裁剪

Question

目前我有一个表单，用于请求用户信息，例如：名称，照片和dob

<form action="action.php" method="post" enctype="multipart/form-data" > 
    <input type="text" name="name" value="" /> 
    <input type="file" name="image" /> 
    <input type="text" name="dob" value="" /> 
    <input type="submit" name="submit" value="submit" /> 
</form> 

我希望用户能够上传，然后在发送表单之前裁剪图像。什么是最好的方法来做到这一点？我知道这是不可能嵌套形式。将以下工作：

• 对浏览按钮
• 当用户点击浏览并选择文件的情况下，图像通过AJAX上传
• 当上传完成覆盖呈现给用户
• 用户能够裁剪图像 - 用户点击保存对话框关闭
• 尺寸存储在隐藏字段的形式
• 用户完成表单的其余部分，并提交

还是有更好的解决方案吗？

Answer 1

得到使用http://www.webtoolkit.info/ajax-file-upload.html我通过Alternative to an Ajax upload form nested in another form

Answer 2

如果您希望服务器执行裁剪，那么您的解决方案听起来像是最合理的方法。

但是，您可以让支持HTML5的浏览器的用户通过画布执行裁剪并将最终裁剪后的图像作为数据发送给您。这个选项的唯一好处是它可以减少服务器的负载，但这基本上意味着你需要实现你的解决方案和这个，除非你期望所有的用户都使用HTML5浏览器。

此外，即使他们提交了应该裁剪的画布（用户始终可以绕过javascript），您仍然需要对来自服务器端的图像执行一些验证。用户在技术上也会两次上传图像，除非画布可以访问用户定义的本地文件，而不必在编辑前上传它们（我当然会认为浏览器中会有安全措施来防止这种情况发生）。

Answer 3

我认为你必须先将图像保存到磁盘，并且只有你应该能够裁剪它。结帐http://deepliquid.com/projects/Jcrop/demos.php。你正在使用哪种编程语言？

这显示了php的实现。

http://www.sanisoft.com/blog/2010/11/08/jcrop-demo-using-php/ 

http://www.cagintranet.com/archive/how-to-use-jcrop-from-within-an-application/ 

如果您使用ajax上传器，它可能不是刷新页面。在sucessfull上传时会有一个javascript回调方法。在该功能上，您可以使用jquery设置图像src并启用裁剪UI。

function AjaxUploaderSucess(){ 
    $("#imgBox").show() 
    $("#imgBox").attr("src", uploadimageUrl); 
    $("#imgBox").Jcrop();//Enable your crop ui 
}