JS 从相册中选择、预览、上传单张图片

前段时间基于微信公众号做了一个投票的活动。项目中涉及到用户报名需要添加图片，整理下上传图片的代码，希望对大家有帮助

<--tpl文件-->
//input选择文件，直接隐藏，js里添加onClick方法


//为选择图片前的样式，

//选择图片的按钮
    ![](./img/img_load.png)//这是一个img标签，显示错误 id="chooseImage" class="chooseImage"
    上传合照.png


//选择图片之后的样式

   //用于展示图片的img
    
    //更换图片的按钮
    ![](img/ima_resert.png)//这是一个img标签，显示错误class="alertImage"



    ![](./img/img_submit.png)//这是一个img标签，显示错误class="btn_submit" 

<--js文件-->
//用于保存选择的图片的base64编码的数据
var imagUrl;
var init = function(){
    bindActive();
}

function bindActive(){
    //点击时调用input选择图片
    $(".input_ImageItem").on('click', function() {
        console.log('选择图片')
        //调用input
        $(".imageinput").click();
    })
    //点击时调用input选择图片
    $(".alertImage").on('click', function() {
        console.log('选择图片')
        $(".imageinput").click();
    })

    //input选择文件后调用的方法
    $(".imageinput").change(function() {
        didLoadImage(this);
    });
    $(".input_box").on('click',function(){
       submit();
    })
}

function didLoadImage(x){
    //取出选择的图片
    var fileInput = x.files[0];
    //判断是否选择了图片
    if(x.files && x.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            //此处得到是图片的base64编码数据
            imagUrl = e.target.result;
            console.log(e);
            $(".imageView").attr('src', imagUrl);
            //展示哪个样式
            if(imagUrl) {
                $('.showImage').css('display', 'inline-flex');
                $(".input_ImageItem").css('display', 'none');
            } else {
                $(".upLoadText").css('display', 'inline-flex');
                $(".imageView").css('display', 'none');
            }
        };
        reader.readAsDataURL(x.files[0]);
    }
}

//手动提交方式：点击提交按钮后直接把imagUrl当做参数传给后台，后台把imagUrl解析就是该图片（imagUrl是图片的base64编码后的数据）
function submit(){
}

效果图如下

图片.png

图片.png

有什么问题可以在下面评论，大家一起探讨
后面会整理多张图片的选择、预览、上传