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

我正在使用Codeigniter的上传库上传用户头像的图像。我也使用Jcrop，它允许用户选择一个区域进行裁剪。在上传之前PHP显示选择的图像

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倍。当选择一个文件，我注意到，它显示了它的名字：

enter image description here

是否有使用该功能来获取图片的路径，以及（在上传的计算机的图像的路径）的方法吗？理论上我可以在图像标签中使用它，并显示没有js的图像。

来源

2012-07-07 CyberJunkie

你是什么意思的'图像路径'？ – maxhud 2012-07-07 22:48:56

为什么不使用已经这样做的库/ api？ http://www.aviary.com/ – 2012-07-07 22:49:14

@maxhud我的意思是在上传者的电脑 – CyberJunkie 2012-07-07 22:57:23

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

传统上，没有办法访问文件的内容或文件上传表单的值。让网页知道文件系统的结构会存在安全风险。（你是在Windows上，在管理员帐户上，......？）以前你可以做到这一点，但我们明智。

The File API introduced in HTML5能够访问文件没有透露这一信息，并有可用的一些很酷的选项，您的客户端应用程序，关键的莫过于文件输入和URL.createObjectURL的files财产。

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

由于文件不是URL，因此URL.createObjectURL会在文件周围创建一个只能由页面和同源iframe使用的虚拟URL。将图像设置到这一点，那么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。这显然不是所有浏览器的解决方案，但对于支持它的浏览器来说，这是一个很好的方法。

来源

2012-07-08 03:37:25

正确。我正在上传全尺寸图片然后剪裁。感谢您的辉煌解决方案！ HTML 5充满了惊喜。我认为最好的做法是以所有浏览器支持它的传统方式。 – CyberJunkie 2012-07-08 19:39:04

嗨！我想用同样的方法，但这不太好。例如，在此代码之后，Google地图不会显示。你可以建议什么？ – Rozkalns 2012-09-02 13:30:09

你可能会使用css（http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html）来做到这一点，但它将难以集成与jcrop ...

我会建议让用户等待，直到它已经上传。这就是Facebook和其他大多数允许剪切的网站。

无论如何它不会加快上传过程，所以没有太多的理由去做。

您无法获得完整的文件路径。这将是一个安全问题：http://forums.asp.net/t/1077850.aspx/1

来源

2012-07-07 22:48:33 maxhud

......除非他也做了剪裁客户端。从理论上讲，Flash或者其他的可能，不是吗？ – mpen 2012-07-08 01:04:29

那么，你可以使用其他的cropper库，它带有一个像defusion一样的预览。

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

来源

2012-07-07 23:10:45

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

回答

相关问题