使用输入[type =“file”]上传文件，而无需发送第二个按钮
I'm setting up a typical profile picture upload and crop feature for a site. I'm looking at how others have set it up and I see that many are managing to have one input type="file" and it not only allows for selecting a file but also calls the PHP or JS to display the image.
I'm completely stuck on how to make it do something after the image has been chosen.
Does any one have a link or suggestion on how to perform this?
我正在为网站设置典型的个人资料图片上传和裁剪功能。 我正在看其他人如何设置它，我发现很多人都设法有一个输入类型=“文件”，它不仅允许选择文件，还调用PHP或JS来显示图像。 p>
我完全坚持在选择图像后如何让它做某事。 p>
是否有人有关于如何执行此操作的链接或建议？ p> div>
One way you could achieve this is to convert the file into a blob, then present it using an HTML5 canvas. Example: http://www.html5rocks.com/en/tutorials/file/dndfiles/
Another option is to issue an AJAX request after the file input has been changed. Do whatever server processing you need to (crop, save, etc.) then return the AJAX call a path to the file. Then just append a new <img src='filepath.jpg' /> to the DOM.
I would upload the image using AJAX, having a API receiving the image. When image has been saved the API-method returns the path of the image.
You can then display the image using the path you recieved from your API-method.