工作中常用的上傳頭像的控件

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

 

結束；