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

发布时间：2020-12-13 13:08:17 所属栏目：PHP教程来源：网络整理

导读：我正在使用Codeigniter的上传库来上传用户头像的图像.我也在使用 Jcrop,它允许用户选择要裁剪的区域. http://www.webresourcesource.com/wp-content/uploads/2012/04/jcrop.jpg 我在文本输入中保存所选区域的所有坐标,我将在php中使用它来裁剪. 是否可以在上

我正在使用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的图像.

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

传统上,无法访问文件的内容或文件上载表单的值.存在安全风险,使网页知道文件系统的结构. (你是在Windows上,在管理员帐户上,……？)很久以前你可以做到这一点,但我们明智了.

The File API introduced in HTML5可以在不泄露此信息的情况下访问文件,并且客户端应用程序可以使用一些很酷的选项,关键的是文件输入的文件属性和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中试用this jsFiddle.这显然不适用于所有浏览器,但对于支持它的浏览器来说,这是一种很好的方法.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!