layui上传图片并显示

长箭已搭弓

已于 2024-09-05 17:06:00 修改

阅读量53

点赞数

文章标签： layui javascript html

于 2024-09-05 17:05:13 首次发布

原文链接：https://www.cnblogs.com/yehuisir/p/13602004.html

版权

layui上传图片并显示(https://www.cnblogs.com/yehuisir/p/13602004.html)

<div class="form-label">现场照片</div>
                    <div class="layui-form-item">
                        <div class="layui-input-block uploadHeadImage">
                            <div class="layui-upload-drag" id="xczp">
                                <i class="layui-icon layui-icon-addition"></i>
                            </div>
                        </div>
                        <!-- 预览图： -->
                        <div class="layui-upload-list" id="xczpYl"></div>
                        <input type="text" id="imgUrls1" name="imgUrls" style="display: none;" class="layui-input">
                    </div>

layui.use(["jquery", "upload", "form", "layer", "element"], function () {
            var $ = layui.$,
                element = layui.element,
                layer = layui.layer,
                upload = layui.upload,
                form = layui.form;
            var s = "";

            //拖拽上传
            var uploadInst = upload.render({
                elem: '#headImg'
                , url: 'http://localhost:8839/NO1/FastDFS//UploadPhoto'
                , size: 1000
                , multiple: true
                , number: 7
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        // $('#demo1').attr('src', result); //图片链接（base64）
                        $('#demo2').append('<img src="' + result
                            + '" alt="' + file.name
                            + '"height="100px" width="100px" class="layui-upload-img uploadImgPreView">')


                    });
                }
                , done: function (res) {
                    if (s == "") {
                        s = JSON.stringify(res);
                    } else {
                        s = s + "," + JSON.stringify(res);
                    };
                    localStorage.setItem("address1", s);
                }           
                , error: function () {
                    demoText.find('.demo-reload').on('click', function () {
                        uploadInst.upload();
                    });
                }

            });
        });