PHP在上传前显示选择的图像

Posted 2023-02-24

【中文标题】PHP在上传前显示选择的图像

【英文标题】：PHP display chosen image before upload

【发布时间】：2012-07-07 22:00:25

【问题描述】：

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

_{（来源：webresourcesource.com）}

我将所选区域的所有坐标保存在文本输入中，我将在 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 的情况下显示图像。

【问题讨论】：

“图像路径”是什么意思？

为什么不使用已经这样做的库/api？ aviary.com

@maxhud 我指的是上传者电脑中图片的路径

你不能：forums.asp.net/t/1077850.aspx/1

@StevenLu，我不认为 Jcrop 有这样的选择。

【参考方案1】：

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

传统上，无法访问文件的内容或文件上传表单的值。让网页知道文件系统的结构会带来安全风险。 （您是在 Windows 上使用管理员帐户吗，...？）很久以前您可以这样做，但我们很聪明。

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

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

由于文件不是 URL，URL.createObjectURL 会围绕文件创建一个虚拟 URL，该 URL 只能由您的页面和同源 iframe 使用。将图像设置为此，然后加载，撤销 URL 并启动您的 jQuery 裁剪插件：

input.addEventListener('change', function () 
    preview.src = URL.createObjectURL(this.files[0]);
);

preview.addEventListener('load', function () 
    URL.revokeObjectURL(this.src);

    alert('jQuery code here. Src: ' + this.src + ', W: ' + this.width + ', H: ' + this.height);
);

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

【讨论】：

正确。我正在上传完整尺寸的图像，然后对其进行裁剪。感谢您的出色解决方案！ HTML 5 充满了惊喜。我认为最好在所有浏览器都支持之前以传统方式进行。

嗨！我想使用相同的方法，但这不是很好。例如，此代码后不显示 Google 地图。你有什么建议？

【参考方案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

【讨论】：

...除非他也做了客户端裁剪。从理论上讲，使用 Flash 或其他东西是可能的，不是吗？

【参考方案3】：

好吧，您可以使用其他带有预览的裁剪器库，就像 defusion 一样。

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