赖成龙

Layui插件上传图片具体步奏以及获取图片地址

发表于:2019/9/29 13:24
  1. 注意事项:

      (1)在使用插件之前需要引入该插件文件包不可分开使用。

      (2)在运行过程中会出现报一个错误(上传图片异常等等)。

      (3)所需js文件和CSS文件根据自己的需求来引用。

      (4)遗漏之处根据自己所需来进行查漏补缺(此方法不唯一)。

  2.布置所需环境:

 <div class="layui-form-item">

                    <div class="layui-upload-list">

                        <img class="layui-upload-img" id="demo1" />

                        <p id="demoText"></p>

                    </div>

                    <label for="L_username" class="layui-form-label">

                        <span class="x-red">*</span>头像上传

                    </label>

                    <div class="layui-upload">

                        <div class="layui-upload">

                            <button type="button" class="layui-btn" id="photo">

                                <i class="layui-icon">&#xe67c;</i>上传图片

                            </button>

                        </div>

                    </div>

                </div>

3.如何解决异常报错(详情)样式问题根据自己需求自定义

示例:

layui.use('upload', function () {

            var upload = layui.upload;

            //执行实例

            upload.render({

                elem: '#photo' //绑定元素

            , url: 'member-add.aspx' //上传接口

            , auto: false

            , accept: "images"

            , size: 1024

            , choose: function (res) {

                res.pushFile();

                res.preview(function (index, file, result) {

                    $('#demo1').attr('src', result);

                });

            }

            });

        });

特别注意:

1.auto参数是主要解决异常问题(会自动上传,默认打开)

2.获取图片路径问题:

      (1) auto必须与choose搭配如果使用其余会出现获取图片路径为空。

      (2)在表单提交时需注意提交方式必须是post提交,以及enctype="multipart/form-data"缺一不可。

3.配置成功之后:

4.关于修改在第一次不选择图片默认图片详情

 string file = "images/" + Request.Files[0].FileName;

                string filename = "";

                if (file == "images/")

                {

                    filename = Request["hidden"];

                }

                else

                {

                    filename = file;

                }

     (1)如果第一次默认图片不选择图片后台获取会获取不到图片路径需要定义文本框存放第一次获取的图片路径方便下一步操作(具体根据自己的思路进行判断)



关于TNBLOG
TNBLOG,技术分享
App store Android
精彩评论
{{item.replyName}}
{{item.content}}
{{item.time}}
{{subpj.replyName}}
@{{subpj.beReplyName}}{{subpj.content}}
{{subpj.time}}
猜你喜欢