从输入文件中获取一些数据 - javascript

【问题标题】：Getting some data from input file - javascript从输入文件中获取一些数据 - javascript
【发布时间】：2013-08-06 11:47:14
【问题描述】：

假设我从我的桌面上传了一些图像文件（使用一些jquery plugin），在我将它发送到服务器之前，我想裁剪图像。如何从输入文件中获取文件 url，（以便将图像放在窗口中并裁剪它）然后如何将输入文件数据放入图像的新大小？因为我读到出于安全原因这可能是不可能的

【问题讨论】：

marqueetool.net - 上传图片然后裁剪
使用 JavaScript“文件 API”和画布。还有谷歌。
@Virus721 是的，我确实做到了。我输入了var fileInput = document.querySelector('#file');var reader = new FileReader(); reader.readAsDataURL(fileInput.files[0]);，但我什么也没得到
@mplungjan 是的，我知道这个插件，但我想要的是获取输入文件的 url，这样我就可以将图像放在窗口中然后裁剪它
你需要先设置 src 属性再尝试读取，否则你在读什么？

【解决方案1】：

我前段时间做过。我使用了一个名为 JCrop 的插件来裁剪我的图像。它真的很棒。

一个简单的例子：

假设我们有这个图像作为我们的标记：

<img src="flowers.jpg" id="target" />

要将其转换为 Jcrop 小部件，请插入以下脚本：

<script language="Javascript">
    jQuery(function($) {
        $('#target').Jcrop();
    });
</script>

此脚本将执行以下操作：

【讨论】：