关于图片上传问题？

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)

        .....

    }

});