tnblog
首页
视频
资源
登录

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

8886人阅读 2019/9/29 13:24 总访问:436647 评论:1 收藏:0 手机
分类: ASP.NET
  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)如果第一次默认图片不选择图片后台获取会获取不到图片路径需要定义文本框存放第一次获取的图片路径方便下一步操作(具体根据自己的思路进行判断)



评价

风清月

2019/9/29 15:45:36

[good][good]厉害老!

Layui水平二级菜单时长不显示的问题

调用一下初始化方法Init就可以解决了

Layui 表单模块常见问题

layui 设置select宽度直接设置select外层的宽度就行,layui的select会自适应宽度layui 设置select会被百度编辑器挡住问题是...

Layui Select添加选择事件Layui 下拉列表

html&lt;selectname=&quot;label&quot;id=&quot;atype&quot;lay-filter=&quot;atype&quot;&gt; &lt;optionvalue=&quot;a&q...

Layui布局

Layui 使用layui-container container来指明一个容器版本&lt;divclass=&quot;layui-containercontainer&quot;style=&quot;b...

Layui 固定列覆盖滚动条,导致表格错位

对于layui,大家都用过吧:轻量级框架,使用方便,快捷,入手难度小,但是这些优点就不代表你没有踩到它的坑。目前遇到一个...

Layuia 图标

图标的官方地址:https://www.layui.com/doc/element/icon.html

Layui水平布局

一个layui-input-inline即可 &lt;divclass=&quot;layui-input-inline&quot;&gt; &lt;/div&gt; &lt;divclass=&quot;layui...

Layui+过滤器 实现权限管理

想要做好一个权限管理并不简单,不管是数据库还是逻辑上都还是有一点复杂的 下面开始讲解我们的权限管理首先创建数据库《规...

Layui 弹窗遮罩层把弹窗挡住问题

代码:layer.open({ type:1, area:[&quot;300px&quot;,&quot;300px&quot;], content:$(&quot;#addvieww&quot;) });分析...

Layui 报错 l.push is not a function

解决方法:layui.use([&#39;jquery&#39;,&#39;layer&#39;,&#39;element&#39;],function(){ } 而不是 layui.use(&#39...

layer loading。Layui 菊花

layer loading层很简单,起到一个遮罩提示加载的效果打开://loading层 varlayerIndex=layer.load(1,{ shade:[0.1,&#39;#...

Layui Tab菜单添加点击事件

layui 实现Tab菜单很简单使用下面的代码即可&lt;divclass=&quot;layui-tab&quot;lay-filter=&quot;test1&quot;&gt; &lt;ul...

使用vue渲染Layui的复选框时无法渲染

这是因为使用vue后数据是动态生成的,没有被layui渲染出来所以有问题,调用一下layui的渲染方法即可layui.use([&#39;form&#...

vue+Layui默认选中第一个tab

可以利用v-for中的index,然后使用一个三目运算即可&lt;ulclass=&quot;layui-tab-title&quot;&gt; &lt;liv-for=&quot;(item...

Layui tab切换更改同一个内容

layui tab切换时如何更改同一个内容呢,不用一个tab对应一个内容,就相当于改变同一个内容,其实很简单就是只留layui-tab-c...
当你知道迷惑时,并不可怜,当你不知道迷惑时,才是最可怜的。
排名
11
文章
201
粉丝
10
评论
13
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术
人类把最精密的保密系统,都用在了自我毁灭上。