关于图片上传问题？

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'>&nbsp; &nbsp; <img src="/images/%E5%9B%BE%E7%89%87.png" alt=""></label>// js$('#file').on('change', function(e){&nbsp; &nbsp; var file = e.currentTarget.files;&nbsp; &nbsp; if (file && file[0]) {&nbsp; &nbsp; &nbsp; &nbsp; var fd = new FormData();&nbsp; &nbsp; &nbsp; &nbsp; fd.append('file', file);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; // 调用ajax请求，上传文件&nbsp; &nbsp; &nbsp; &nbsp; $.ajax('/xxxx', fd)&nbsp; &nbsp; &nbsp; &nbsp; .....&nbsp; &nbsp; }});