javascript - 使用输入上传文件[类型 ="file"]，无需第二个按钮即可发送

Question

我正在为网站设置典型的个人资料图片上传和裁剪功能。我正在查看其他人如何设置它，我发现许多人都设法拥有一个输入类型="file"，它不仅允许选择文件，还可以调用 PHP 或 JS 来显示图像。

我完全不知道如何让它在选择图像后执行某些操作。

有人有关于如何执行此操作的链接或建议吗？

Answer 1

实现此目的的一种方法是将文件转换为 blob，然后使用 HTML5 canvas 呈现它。 。示例:http://www.html5rocks.com/en/tutorials/file/dndfiles/

另一种选择是在文件输入更改后发出 AJAX 请求。执行您需要的任何服务器处理(裁剪、保存等)，然后返回 AJAX 调用文件的路径。然后只需附加一个新的 <img src='filepath.jpg' />到 DOM。