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

时间:2012-07-07 22:38:08

标签: php jquery codeigniter file-upload

我正在使用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次。选择文件时,我注意到它显示了它的名称:

enter image description here

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

3 个答案:

答案 0 :(得分:7)

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

传统上,无法访问文件内容或文件上载表单的值。存在安全风险,使网页知道文件系统的结构。 (你是在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。这显然不适用于所有浏览器,但对于支持它的浏览器来说,这是一种很好的方法。

答案 1 :(得分:1)

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

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

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

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

答案 2 :(得分:1)

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

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