上传前显示选择的图片 - PHP

Question

我正在使用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>

如果可能的话，我正在尝试避免使用繁重的JavaScript或上传两次。选择文件时，我注意到它显示了文件的名称：

有没有办法利用该功能来检索图像路径（上传者电脑中图像的路径）？理论上，我将能够在图像标记中使用它，并在没有js的情况下显示图像。

- CyberJunkie

---

“image path” 是什么意思？ - Max Hudson

为什么不使用已经存在的库/API 呢？http://www.aviary.com/ - Steven Lu

@maxhud 我的意思是上传者电脑中图片的路径。 - CyberJunkie

抱歉，您无法访问此链接：http://forums.asp.net/t/1077850.aspx/1 - Max Hudson

@StevenLu，我认为Jcrop没有这个选项。 - CyberJunkie

Answer 1

请明确一点，你当前的解决方案中并没有上传文件两次，对吧？你只需要上传一次，在临时位置存储它，在裁剪页面上显示它，然后在第二个操作中发送裁剪参数即可。

传统上，无法访问文件内容或文件上传表单的值。让网页知道您的文件系统结构存在安全风险。（您是否在Windows上，使用管理员帐户等？）很久以前可以这样做，但我们变得聪明了。 HTML5中引入的File API使得可以访问文件而不会泄露此信息，并且客户端应用程序有一些很棒的选项，其中关键选项是文件输入的files属性和URL.createObjectURL。

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

由于文件不是 URL，URL.createObjectURL 会在文件周围创建一个虚拟 URL，仅可由您的网页和同源 iframe 使用。将图像设置为此 URL，然后在加载后撤销该 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。显然，这并不是所有浏览器的解决方案，但它是为支持它的浏览器增强功能的绝佳方式。

- Brian Nickel

---

正确。我先上传完整尺寸的图片，再进行裁剪。感谢这个绝妙的解决方案！HTML 5 充满了惊喜。我认为最好还是按照传统方式操作，直到所有浏览器都支持它。 - CyberJunkie

嗨！我想使用相同的方法，但效果不太好。例如，谷歌地图在此代码后无法显示。你有什么建议吗？ - Rozkalns

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

- Max Hudson

---

除非他也在客户端进行了裁剪。理论上，使用 Flash 或其他工具是可能的，对吧？ - mpen

Answer 3

嗯，你可以使用其他带有预览功能的裁剪库，比如defusion。

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

- user1202495