jquery隐藏上传文件框，按钮触发上传文件（图片）

1.html简易代码，用display:none隐藏了file input框

<div>
    <span>头像</span>
    <img src="test.jpg" class="avatar" onerror="javascript:this.src='noavatar.jpg';"/>
    <a href="javascript:;" id="avatar">修改</a>
    <input type="file" id="chat_image" name="avatar" style="display: none;">
</div>                                                                                                        

2.两行代码搞定，点击按钮弹出选择文件窗口

//异步上传头像
$('#avatar').click(function () {
    return $('#chat_image').click(); //注意这句，主要是需要return点击事件返回值
});

3.如果有同学需要jq异步上传图片代码的话  就看下面这段

注意：这里需要先引入ajaxfileupload.js，网上版本太多，我这里发一个自己用的https://github.com/wubojing/ajaxfileupload

//上传图片封装
    $('#chat_image').change(function () {

        $.ajaxFileUpload({
            url:"{:url('User/uploadAvatar')}", //你处理上传文件的服务端
            secureuri:false,
            fileElementId:'chat_image',//与页面处理代码中file相对应的ID值
            processData : false,
            contentType : false,
            dataType: 'json', //返回数据类型:看后端返回的是什么数据
            success: function (data, status) {
//                console.log(data);
                //处理成功之后刷新页面
                setTimeout(function(){
                    window.location.reload();
                },1000)
            },
            error: function(data, status, e){ //提交失败自动执行的处理函数
                alert(e);
            }
        })

    });

4.php端的代码，如果不是thinkphp的话就用$_FILES['avatar']

$file = request()->file('avatar');//获取表单上传文件，这里的参数就是前端input的name