Javascript圖片上傳

Question

如何在JavaScript中使用裁剪實現圖片上傳器。你如何通過AJAX提交圖像文件？該解決方案是否跨域兼容？

Answer 1

如果您使用jQuery，您可以查看jCrop插件。

Answer 2

要回答你問題的最後部分 - 你不能使用XmlHttpRequest上傳文件，所以「純AJAX」在這裏不會匹配。 你可以做的是

<FORM method="post" enctype="multipart/form-data" 
    action="serverscript.cgi" target="hiddenframe> 
<input type="file".... 
</FORM> 
<iframe id="hiddenframe" name="hiddenframe" style="display:none"></iframe> 

那麼你將不得不趕上文檔「的onload」事件在iframe知道什麼時候你的文件是在那裏。

Answer 3

如果您想使用Prototype，您可能會對jsCropperUI插件感興趣。它有很多功能，代碼非常整齊。

http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

Answer 4

爲了實現與作物功能的圖像上傳控件，你必須：

1. 將圖像上傳至從AJAX應用程序服務器上傳的文件是對自己的一個話題。最好從許多現有的AJAX文件上傳小部件之一開始。

2. 將圖像存儲在服務器上將圖像上傳到服務器後，必須將圖像URL傳遞給裁剪小部件。

3. 指定裁剪區域通過手頭的圖像URL，您可以編寫一個小裁剪控件，它允許您定義圖像的裁剪區域。

4. 在服務器上裁剪圖像在用戶定義了裁剪區域之後，裁剪數據必須通過AJAX調用發送到服務器。在服務器上，圖像必須使用許多圖像處理工具之一（例如ImageMagick）進行裁剪。