关于图片上传问题?

小木
  • 296

看到一些平台用户上传图片,直接就点击一次按钮(或图片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弹出选择框,但是第一次上传是失败的,感觉还是需要绑定另外一个按钮才能实现上传。该怎样实现?

回复
阅读 1.4k
2 个回答
✓ 已被采纳

先说下思路:

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)
        .....
    }
});

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏