工作中常用的上传头像的控件

html代码部分

<div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">头像</label>
                <div class="upload">
                    <span><i class="layui-icon layui-icon-edit"></i>修改头像</span>
                    <input type="file" id="file1" name="file"/>
                    {if $tea_info.avatar}
                    <img src="{$tea_info.avatar}" id="photoImg"/>
                    {else}
                    <img src="{ROOT_THEME_PATH}admin/basic/images/photo.png" id="photoImg"/>
                    {/if}
                    <input type="hidden" name="data[avatar]" value="" id="avatar">
                </div>
            </div>
            <div class="layui-input-block layui-word-aux">
                建议尺寸：100*100 格式要求：jpg,gif,png，最大3MB。
            </div>
        </div>

js部分

用到的文件：

 

<script src="{ROOT_THEME_PATH}Resp/layui/layui.all.js"></script>
<script src="{ROOT_THEME_PATH}js/jquery-1.9.1.min.js"></script>
<script src="{ROOT_THEME_PATH}admin/diy/js/ajaxfileupload.js" type="text/javascript"></script>

 

 

 //选择头像
    $("#file1").on("change", function () {
        let fileImg = $(this)[0].files[0];
        if ($("#file1").val().length > 0) {
            //头像预览
            let reader = new FileReader();  //调用FileReader
            reader.onload = function (evt) {   //读取操作完成时触发。
                $("#photoImg").attr('src', evt.target.result);  //将img标签的src绑定为DataURL
            }
            reader.readAsDataURL(fileImg); //将文件读取为 DataURL(base64)
            ajaxFileUpload();
        } else {
            layer.alert('请选择图片');
        }
    })
    function ajaxFileUpload() {
        $.ajaxFileUpload({
            url: '{SITE_URL}man.php?c=Home_basic_organization&m=upload_avatar', //用于文件上传的服务器端请求地址
            secureuri: false, //是否需要安全协议，一般设置为false
            fileElementId: 'file1', //文件上传域的ID
            dataType: 'JSON', //返回值类型 一般设置为json
            success: function (data, status) { //服务器成功响应处理函数
                data = JSON.parse(data);
                if (data.code == 1) {
                    $("#avatar").attr("value", data.data);
                    layer.msg(data.msg, {icon: 1});
                } else {
                    layer.msg(data.msg, {icon: 5});
                }
            },
            error: function (data, status, e) { //服务器响应失败处理函数
                alert(e);
            }
        })
        return false;
    }

 

结束；