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上,在管理员帐户上,......？)很久以前你可以做到这一点,但我们明智了.

HTML5中引入的File API使得访问文件成为可能,而不会泄露这些信息,并且客户端应用程序可以使用一些很酷的选项,关键files是文件输入和属性URL.createObjectURL.

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

由于文件不是URL,因此URL.createObjectURL在文件周围创建一个虚拟URL,该URL只能由您的页面和同源iframe使用.将图像设置为this,然后onload,撤消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中尝试这个jsFiddle.这显然不适用于所有浏览器,但对于支持它的浏览器来说,这是一种很好的方法.