插件窝 干货文章 layui上传头像,上传图片方法封装

layui上传头像,上传图片方法封装

js layui 628    来源:插件窝    2021-04-23
layui.use(['upload'], function() {
    var layer = layui.layer;
    var $ = layui.jquery,
        upload = layui.upload;
    //普通图片上传开始
    var uploadInst = upload.render({
        elem: '#id_upload_img',
        url: '/user/upload_img/',
        size: 600, //限制文件大小,单位 KB
        before: function(obj) {
            //预读本地文件示例,不支持ie8
            obj.preview(function(index, file, result) {
                $('#id_upload_img').attr('src', result); //图片链接(base64)
            });
        },
        done: function(res) {
            //如果上传失败
            if (res.status > 0) {
                return layer.msg('上传失败');
            }
            //上传成功
        },
        error: function() {
            //演示失败状态,并实现重传
            var demoText = $('#demoText');
            demoText.html(
                '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
            demoText.find('.demo-reload').on('click', function() {
                uploadInst.upload();
            });
        }
    });
    //普通图片上传结束
})

注意:请务必引入layui.js核心代码文件