在开发过成中,难免是会要接触到图片上传后实现即时预览的,但是说实话,这样实现起来不使用插件的话,代码量还是有一点点的,

所以今天就推荐使用layui 来实现图片的上传功能,非常简单和适用,废话不多说 贴出代码来

#代码部分

<html>
<head>
    <title>layui 点击上传图片</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="//layui.hcwl520.com.cn/layui/css/layui.css?v=201801090202"/>
    <script src="//layui.hcwl520.com.cn/layui/layui.js?v=201801090202"></script>
</head>
<body>
<div>
    <div class="layui-form-item">
        <label class="layui-form-label">上传头像</label>
        <div class="layui-input-inline">
            <div class="layui-upload">
                <input type="hidden" name="logo" value="" id="logo">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" id="demo1" width="80px" height="80px">
                    <p id="demoText"></p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var myVarate = 'https://www.baidu.com/img/bd_logo.png';
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function () {
        var layer = layui.layer, upload = layui.upload, $ = layui.$, demoText = $('#demoText');
        $('#demo1').attr('src', myVarate);//页面初始化的时候渲染图片
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#demo1',
            url: 'http://bolg.lengff.xyz/test',//这里填写你的上传地址
            accept: 'images',
            method: 'post',
            acceptMime: 'image/*'
            , before: function (obj) {
                /*如果您不想用上面的URL 进行上传,也可以在这里,添加你的上传方式*/
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result);//图片链接（base64）
                });
            }, done: function (res) {
                if (res.code == 200) {//长传成功(具体返回code 看后台是怎么处理的)
                    return layer.msg('上传失败');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                } else {
                    layer.msg('图片上传成功!');
                }
            }
            , error: function () {
                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();
        });
    });
</script>
</html>

#说明

具体的实现原理其实很简单,就是依赖layui的文件上传工具

 ​

layui 点击头像 上传头像_图片上传

#尾巴 没有尾巴