上傳表格中的圖像以允許用戶在提交之前裁剪

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 
}