PHP在上传前显示所选图像

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

（来源：）

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

您可以使用css来实现这一点(http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html)，但要与jcrop集成将非常困难

我建议让用户等待，直到它被上传。这就是facebook和其他大多数允许裁剪的网站所做的

无论如何，它都不会加快上传过程，因此没有太多理由这么做

---

您无法获取完整的文件路径。这将是一个安全问题：

好吧，您可以使用其他cropper库，它提供了与defusion一样的预览

---

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

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

使访问文件而不泄露这些信息成为可能，客户端应用程序有一些很酷的选项，关键的选项是文件输入的

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中试用。这显然不是一个适用于所有浏览器的解决方案，但对于支持它的浏览器来说，这是一个很好的增强方法。

你所说的“图像路径”是什么意思？为什么不使用一个已经做到了这一点的库/api呢@maxhud我是指上传者计算机中图像的路径你不能：@StevenLu，我不认为Jcrop有这样的选择……除非他也在客户端进行裁剪。从理论上讲，这是可能的闪光灯或其他东西，不？正确。我正在上传全尺寸图像，然后进行裁剪。谢谢你的精彩解决方案！HTML5充满了惊喜。我认为在所有浏览器都支持之前，最好还是用传统的方式来做。嗨！我想用同样的方法，但效果不太好。例如，Google Maps在此代码之后不会显示。你有什么建议？