PHP在上传之前显示所选图像

Question

我正在使用Codeigniter的上传库为用户头像上传图片。我也在使用Jcrop，它允许用户选择要裁剪的区域。

http://www.webresourcesource.com/wp-content/uploads/2012/04/jcrop.jpg

我在文本输入中保存所选区域的所有坐标，我将在php中使用它来裁剪。

是否可以在上传前显示所选图像？

上传表单：

<?php echo form_open_multipart('upload/do_upload');?>

<input type="file" name="userfile" size="20" />

<input type="submit" value="upload" />

</form>

如果可能，我试图避免重js或上传2次。选择文件时，我注意到它显示了它的名称：

有没有办法使用该功能来检索图像路径（上传者计算机中图像的路径）？从理论上讲，我将能够在图像标签中使用它并显示没有js的图像。

Answer 1

要明确的是，您没有在当前的解决方案中上传文件两次，对吧？您应该只上传一次，将其存储在临时位置，将其显示在裁剪页面上，然后在第二个操作上发回裁剪参数。

传统上，无法访问文件内容或文件上载表单的值。存在安全风险，使网页知道文件系统的结构。 （你是在Windows上，在管理员帐户上，......？）很久以前你可以做到这一点，但我们明智了。

The File API introduced in HTML5可以在不泄露此信息的情况下访问文件，并且您的客户端应用程序可以使用一些很酷的选项，关键的是文件输入的files属性和{ {1}}。

更改表单时，使用URL.createObjectURL fileInput.files对象公开输入中文件的内部表示。 API存在于您可以读取字节但您想将其设置为图像源的位置。

由于文件不是网址，FileList会在文件周围创建一个虚拟网址，该网址只能由您的网页和同源iframe使用。将图像设置为this，然后onload，撤消URL并启动jQuery裁剪插件：

URL.createObjectURL

至少在Chrome和Firefox中试用this jsFiddle。这显然不适用于所有浏览器，但对于支持它的浏览器来说，这是一种很好的方法。

Answer 2

你可以使用css（http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html）来做这件事，但要与它集成起来会非常困难jcrop ...

我建议让用户等到上传完毕。这就是Facebook和其他大多数允许裁剪的网站。

在任何情况下都不会加快上传过程，所以没有太多理由去做。

您无法获取完整的文件路径。这将是一个安全问题：http://forums.asp.net/t/1077850.aspx/1

Answer 3

好吧，你可以使用其他裁剪器库，它带有一个预测，就像一个defusion有。

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