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

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

然而，您可以让拥有HTML5支持的浏览器的用户通过画布执行裁剪，并将最终裁剪的图像作为数据发送给您。此选项的唯一优势是它可能会减轻您服务器的负担，但这基本上意味着您需要实现您的解决方案和此解决方案，除非您希望所有用户都使用HTML5浏览器。

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

Answer 2

我认为你必须首先将图像保存到磁盘，而不仅仅是你应该能够裁剪它。结帐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
}

Answer 3

使用我http://www.webtoolkit.info/ajax-file-upload.html

找到的Alternative to an Ajax upload form nested in another form工作了

在表单内上传图像以允许用户在提交之前进行裁剪

3 个答案: