使用输入上传文件[type =＆＃34; file＆＃34;]，无需发送第二个按钮

Question

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

我完全坚持如何在选择图像后做一些事情。

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

Answer 1

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

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

Answer 2

我会使用AJAX上传图像，使用API​​接收图像。保存图像后，API方法将返回图像的路径。

然后，您可以使用从API方法收到的路径显示图像。