上传文件输入[type="file"],没有第二个按钮发送


Upload file with input[type="file"] without a second button to send

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

我完全卡住了如何使它做一些事情后,图像已被选中。

有没有人有一个链接或建议如何执行这个?

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

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

我将使用AJAX上传图像,让API接收图像。当图像保存后,api方法返回图像的路径。

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