I'm using Codeigniter's upload library to upload images for user avatars. I'm also using Jcrop which allows users to select an area to crop.
我正在使用Codeigniter的上传库来上传用户头像的图像。我也在使用Jcrop，它允许用户选择要裁剪的区域。
http://www.webresourcesource.com/wp-content/uploads/2012/04/jcrop.jpg
http://www.webresourcesource.com/wp-content/uploads/2012/04/jcrop.jpg
I'm saving all the coordinates of the selected area in text inputs which I'll use in php to crop.
我在文本输入中保存所选区域的所有坐标，我将在php中使用它来裁剪。
Is it possible to display the image selected before uploading?
是否可以在上传前显示所选图像？
Upload form:
上传表格：
<?php echo form_open_multipart('upload/do_upload');?>
<input type="file" name="userfile" size="20" />
<input type="submit" value="upload" />
</form>
If possible I'm trying to avoid heavy js for this or uploading 2 times. When choosing a file I notice that it shows the name of it:
如果可能的话，我试图避免重js或上传2次。选择文件时，我注意到它显示了它的名称：
Is there a way to use that functionality to retrieve the image path as well (path to the image in the uploader's computer)? In theory I'll be able to use that in image tags and display the image without js.
有没有办法使用该功能来检索图像路径（上传者计算机中图像的路径）？从理论上讲，我将能够在图像标签中使用它并显示没有js的图像。
3 个解决方案
#1
7
To be clear, you are not uploading the file twice in your current solution, right? You should only be uploading once, storing it in a temporary location, displaying it on the crop page, and then sending the crop parameters back on the second action.
需要说明的是，您没有在当前的解决方案中上传文件两次，对吗？您应该只上传一次，将其存储在临时位置，在裁剪页面上显示，然后在第二个操作上发回裁剪参数。
Traditionally, there has been no way to access the contents of a file or the value of the file upload form. There would be a security risk letting a web page know the structure of your file system. (Are you on Windows, on an admin account, ...?) Eons ago you could do this, but we got wise.
传统上，无法访问文件的内容或文件上载表单的值。存在安全风险，使网页知道文件系统的结构。 （你是在Windows上，在管理员帐户上，......？）很久以前你可以做到这一点，但我们明智了。
The File API introduced in HTML5 makes it possible to access files without revealing this information, and there are some cool options available to your client-side application, the key ones being the files property of a file input and URL.createObjectURL.
HTML5中引入的File API使得可以在不泄露此信息的情况下访问文件，并且客户端应用程序可以使用一些很酷的选项，关键是文件输入的文件属性和URL.createObjectURL。
When you change a form, an internal representation of the file(s) in the input are exposed using fileInput.files which is a FileList object. API's exist where you can read the bytes but you want to set it as the source of an image.
更改表单时，使用fileInput.files（FileList对象）公开输入中文件的内部表示。 API存在于您可以读取字节但您想将其设置为图像源的位置。
Since a file is not a URL, URL.createObjectURL creates a virtual URL around the file that can only be used by your page and same-origin iframes. Set the image to this, then onload, revoke the URL and kick off your jQuery cropping plugin:
由于文件不是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);
});
Try out this jsFiddle in at least Chrome and Firefox. This is obviously not a solution for all browsers but it is a great way to enhance it for browsers that do support it.
至少在Chrome和Firefox中尝试这个jsFiddle。这显然不适用于所有浏览器，但对于支持它的浏览器来说，这是一种很好的方法。
#2
1
You could potentially do it using css (http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html), but it's going to be incredibly hard to integrate with jcrop...
您可以使用css（http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html）进行此操作，但与jcrop集成将非常困难。 。
I would recommend just making the user wait until it has been uploaded. That's what facebook and most other websites that allow cropping do.
我建议让用户等到它上传完毕。这就是facebook和大多数其他允许裁剪的网站。
In any case it wouldn't speed up the upload process so there isn't that much a reason to do it.
在任何情况下，它都不会加快上传过程，因此没有太多理由去做。
You can't get the full filepath. It would be a security issue: http://forums.asp.net/t/1077850.aspx/1
您无法获得完整的文件路径。这将是一个安全问题：http：//forums.asp.net/t/1077850.aspx/1
#3
1
Well, you can use other cropper library wich comes with a preview like the one defusion has.
好吧，你可以使用其他裁剪库，它带有一个预测，就像一个defusion一样。
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/
#1
7
To be clear, you are not uploading the file twice in your current solution, right? You should only be uploading once, storing it in a temporary location, displaying it on the crop page, and then sending the crop parameters back on the second action.
需要说明的是，您没有在当前的解决方案中上传文件两次，对吗？您应该只上传一次，将其存储在临时位置，在裁剪页面上显示，然后在第二个操作上发回裁剪参数。
Traditionally, there has been no way to access the contents of a file or the value of the file upload form. There would be a security risk letting a web page know the structure of your file system. (Are you on Windows, on an admin account, ...?) Eons ago you could do this, but we got wise.
传统上，无法访问文件的内容或文件上载表单的值。存在安全风险，使网页知道文件系统的结构。 （你是在Windows上，在管理员帐户上，......？）很久以前你可以做到这一点，但我们明智了。
The File API introduced in HTML5 makes it possible to access files without revealing this information, and there are some cool options available to your client-side application, the key ones being the files property of a file input and URL.createObjectURL.
HTML5中引入的File API使得可以在不泄露此信息的情况下访问文件，并且客户端应用程序可以使用一些很酷的选项，关键是文件输入的文件属性和URL.createObjectURL。
When you change a form, an internal representation of the file(s) in the input are exposed using fileInput.files which is a FileList object. API's exist where you can read the bytes but you want to set it as the source of an image.
更改表单时，使用fileInput.files（FileList对象）公开输入中文件的内部表示。 API存在于您可以读取字节但您想将其设置为图像源的位置。
Since a file is not a URL, URL.createObjectURL creates a virtual URL around the file that can only be used by your page and same-origin iframes. Set the image to this, then onload, revoke the URL and kick off your jQuery cropping plugin:
由于文件不是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);
});
Try out this jsFiddle in at least Chrome and Firefox. This is obviously not a solution for all browsers but it is a great way to enhance it for browsers that do support it.
至少在Chrome和Firefox中尝试这个jsFiddle。这显然不适用于所有浏览器，但对于支持它的浏览器来说，这是一种很好的方法。
#2
1
You could potentially do it using css (http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html), but it's going to be incredibly hard to integrate with jcrop...
您可以使用css（http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html）进行此操作，但与jcrop集成将非常困难。 。
I would recommend just making the user wait until it has been uploaded. That's what facebook and most other websites that allow cropping do.
我建议让用户等到它上传完毕。这就是facebook和大多数其他允许裁剪的网站。
In any case it wouldn't speed up the upload process so there isn't that much a reason to do it.
在任何情况下，它都不会加快上传过程，因此没有太多理由去做。
You can't get the full filepath. It would be a security issue: http://forums.asp.net/t/1077850.aspx/1
您无法获得完整的文件路径。这将是一个安全问题：http：//forums.asp.net/t/1077850.aspx/1
#3
1
Well, you can use other cropper library wich comes with a preview like the one defusion has.
好吧，你可以使用其他裁剪库，它带有一个预测，就像一个defusion一样。
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/