我正在使用 Codeigniter 的上传库为用户头像上传图片。我还在使用Jcrop，它允许用户选择要裁剪的区域。
我将所选区域的所有坐标保存在文本输入中，我将在 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 的情况下显示图像。
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.
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.
当您更改表单时，输入中文件的内部表示会使用fileInput.fileswhich 是一个FileList对象来公开。API 存在于其中您可以读取字节但您想将其设置为图像源的位置。
由于文件不是 URL，URL.createObjectURL因此围绕文件创建一个虚拟 URL，该 URL 只能由您的页面和同源 iframe 使用。将图像设置为此，然后加载，撤销 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 。这显然不是适用于所有浏览器的解决方案，但对于支持它的浏览器来说，它是增强它的好方法。
您可以使用 css (http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html) 来完成它，但是与 jcrop 集成将非常困难。 .
我建议让用户等到它被上传。这就是 facebook 和大多数其他允许裁剪的网站所做的。
在任何情况下，它都不会加快上传过程，因此没有太多理由这样做。
您无法获得完整的文件路径。这将是一个安全问题：http ://forums.asp.net/t/1077850.aspx/1
好吧，您可以使用其他带有预览的裁剪器库，就像 defusion 一样。
http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/