关于图片上传问题？

Question

看到一些平台用户上传图片，直接就点击一次按钮（或图片icon），就弹出选择框，用户确认以后，图片就直接上传并在前台返回图片信息，但是通常步骤是：点击按钮1选择图片》弹出选择框》用户确认》点击按钮2确认上传，怎样实现用户选完图片确认后就直接上传，无需再点击其他按钮？
我试着写一下：

<input type="file" name='file' id='file' class='file'>
<label for='file'>
<img src="/images/%E5%9B%BE%E7%89%87.png" alt="">
</label>

把input隐藏,用ajax上传，img绑定click,点击img弹出选择框，但是第一次上传是失败的，感觉还是需要绑定另外一个按钮才能实现上传。该怎样实现？

Answer 1

先说下思路：

1.把input隐藏，给img标签的点击回调方法中，手动调 input 的 click 方法，这时候会弹出图片选择框，开始选择。
2.给 input 的 change 事件回调函数里，获取选择的文件。
3.用 javascript 创建 formData对象并添加选择的文件到formData对象中，手动调用 ajax 方法上传文件。

示例代码（以jQuery为例，可换成其他方式）：

// html
<input type="file" name='file' id='file' class='file'>
<label for='file'>
    <img src="/images/%E5%9B%BE%E7%89%87.png" alt="">
</label>

// js

$('#file').on('change', function(e){
    var file = e.currentTarget.files;
    if (file && file[0]) {
        var fd = new FormData();
        fd.append('file', file);
        
        // 调用ajax请求，上传文件
        $.ajax('/xxxx', fd)
        .....
    }
});

Answer 2

监听input的onchange事件，当选择图片后，会触发input的onchange事件，在事件回调中触发表单提交逻辑，从而避免了手动点击上传按钮。