LayUI上传图片-程序员宅基地

layui现学现用一段时间发现还挺好用的。对一些不复杂的功能来说还算是方便。

记录一下上传图片方式，layui集成了图片上传及预览的方式。

看看效果图

前端HTML代码，用于展示上传图片按钮及预览的位置；还带进度条哦...

 <div class="layui-upload" style="margin-left: 110px;margin-bottom: 30px;">
            <button type="button" class="layui-btn" id="uploadImg">上传图片</button>
            <div style="display:none;">
                <input type="text" name="img_url" id="ipt_fileName" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-upload-list">
                <img class="layui-upload-img" id="img_id">
                <p id="demoText"></p>
            </div>
            <div style="width: 95px;">
                <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="upload_filter">
                    <div class="layui-progress-bar" lay-percent=""></div>
                </div>
            </div>
        </div>

JS方面需要声明 upload 上传、下载功能

即

layui.use(['form','upload'], function () {
        var form = layui.form;
        var $ = layui.jquery
            , upload = layui.upload;
});

上传图片JS方法

        //常规使用 - 普通图片上传
        var uploadInst = upload.render({
            elem: '#uploadImg'
            , url: '上传接口'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#img_id').attr('src', result); //图片
                });
                element.progress('upload_filter', '0%'); //进度条
                layer.msg('上传中', { icon: 16, time: 0 });
            }
            , done: function (res) {
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                $('#demoText').html(''); //置空上传失败的状态
                $("#ipt_fileName").val(res.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();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('upload_filter', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', { icon: 1 });
                }
            }
        });

HTML代码跟JS 代码是通过uploadImg 这个ID进行联系的

只需要实现这两步上传图片功能就已经实现了。

后端上传功能用文件流的方式保存到指定地方就可以了，这个百度上也是有很多相应的上传方法。

本文链接：https://blog.csdn.net/zhongniangyou/article/details/118757525

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

渗透测试实战-CS工具使用_kali如何用cs，网络安全0基础方法类-程序员宅基地

文章浏览阅读663次，点赞19次，收藏20次。Cobalt Strike一款以由美国redteam团队，研发出来的一款以Metasploit为基础的GUI框架式渗透测试工具。它是一款基于java的渗透测试神器，常被业界人称为CS，也被戏称为“线上多人运动平台 ”。Cobalt Strike集成了端口转发、扫描多模式端口Listener、 Windows exe程序生成、Windows dll动态链接库生成、java程序生成、 office宏代码生成，包括站点克隆获取浏览器的相关信息等。_cs工具使用

【BZOJ-3779】重组病毒 LinkCutTree + 线段树 + DFS序-程序员宅基地

文章浏览阅读113次。3779: 重组病毒Time Limit:20 SecMemory Limit:512 MBSubmit:224Solved:95[Submit][Status][Discuss]Description黑客们通过对已有的病毒反编译，将许多不同的病毒重组，并重新编译出了新型的重组病毒。这种病毒的繁殖和变异能力极强。为了阻止这种病毒传播，某安全机构策划了一次实验，来..._接下来n行,每一行输入两个数x和y,代表编号为x和编号为y的用户在同一个圈子里

包子笔记 - 投资的不可复制性_（1）时来天地皆同力，运去英雄不自由。从企业战略管理的角度，谈谈你对这句话的理解。-程序员宅基地

文章浏览阅读1w次。　　2017-11-26 04:25:43 周末整理了思路，觉得下一个大机会是在转债。　　我估计现阶段的战略，满仓银行加打新会让我大致再翻一番，也就是上500万。届时转债市场应该会变得巨大，随着打转债，越来越多的散户对转债有所了解。现时各种债一路下跌，意味着转债的债底也会越来越低。而转债这个东西对于散户还是太复杂了。散户连市盈率和市净率都不关心，自然也不关心期权的价值，能知道个..._（1）时来天地皆同力，运去英雄不自由。从企业战略管理的角度，谈谈你对这句话的理解。

关于Font Awesome图标的使用_fontawesome可以商用吗-程序员宅基地

文章浏览阅读5.3k次。Font Awesome，原只为Bootstrap而设计的字体图标，不过，现在你可以单独用它来为你的网站工作。丢掉图片图标吧，一起来用Font Awesome！Font Awesome几乎囊括了网页中可能用到的所有图标，这些图标通过Web Font的方式来显示，可以被任意缩放、改变颜色，你可以像修改文字样式那样来修改图标样式。Font Awesome 特性：1、一个字体文件， 24_fontawesome可以商用吗

pygame.USEREVENT创建多个用户事件-程序员宅基地

文章浏览阅读3.5k次，点赞2次，收藏7次。使用pygame.USEREVENT创建多个用户事件是需要将该常量加1即可：# 创建第一个用户事件EVENT1 =pygame.USEREVENT# 创建第二个用户事件EVENT2 =pygame.USEREVENT + 1... ...检测用户事件：event_list = pygame.event.get() #可以获取用户当前操作的事件列表for ev...

vue jquery方式修改内容及操作dom及扩展_vue 修改dom内容不影响点击事件-程序员宅基地

文章浏览阅读1.6k次。//页面全部加载完成，且组件都已经挂载 ready: function () { var cellDom = this.getElementsClass("cell"); // cellDom[0].innerHTML = '评估内容'; cellDom[1].innerHTML = '评估指标'; cellDom[2].innerHTML = '评价等级'; var bodyDom = this.getElementsClass(..._vue 修改dom内容不影响点击事件

随便推点

Python CGI 接收JSON参数_cgi 获取json-程序员宅基地

文章浏览阅读721次。1. 编写CGI工具包（cgi_utils.py）#! /usr/bin/env python3# -*- coding: utf-8 -*-import codecsimport jsonimport osimport sysfrom urllib import parsesys.stdout = codecs.getwriter('utf8')(sys.stdout.detach())sys.stdin = codecs.getreader('utf8')(sys.stdin.det_cgi 获取json

小球碰撞边框并停下的代码-程序员宅基地

文章浏览阅读245次。package test;import java.awt.Color;import java.awt.Font;import java.awt.Frame;import java.awt.Graphics;import java.awt.Image;import java.awt..._c语言小球碰撞后停止

Python使用递归法和函数式编程计算整数各位之和-程序员宅基地

文章浏览阅读1.5k次。问题描述：给定一个正整数，计算其各位数字之和。参考代码：程序运行无任何输出，表示两个函数结果一致。----------相关阅读----------1900页Python系列PPT分享一：基..._python输入一串正整数折半递归求和

信号采集系统的硬件连接笔记_地开信号采集-程序员宅基地

文章浏览阅读2.3k次，点赞2次，收藏6次。在使用差分或者RSE方式时，由于信号负端不与AIGND连接，放大器的输入偏置电流有可能会使信号电压偏离测量设备的量程范围，所以需要在信号两端与AIGND之间分别加一个偏置电阻，从系统平衡角度而言，建议取等值的两电阻，阻值范围一般在10kΩ和100kΩ之间。无参考地单端（NRSE）连接方式的测量系统是对RSE连接方式的一种变形，各路信号共享一个基准点，而仪用放大器负极正是与这个公共基准点相连的，但并不与系统地相连，所以测得信号是以该基准点作为参考点的电压信号。这样可以实现信号地与系统地之间的隔离。_地开信号采集

sublime text python c++_sublime python中如何用 c++-程序员宅基地

文章浏览阅读810次。1.python/c++指定pathctrl+b编译ctrl+shift+b编译运行2.c++实现控制台输出使用批处理文件。本解决方法以C语言程序为例，编译器是gcc，我下载了MINGW直接解压到C盘根目录下，并设置了相应的PATH。其它编程语言可以按照这个思路适当修改批处理文件。新建两个批处理文件，一个名为runp.bat，内容如下：@ec_sublime python中如何用 c++

python基础——matplotlib——scatter和plot方法中的maker参数（点的样式）_python scatter marker-程序员宅基地

文章浏览阅读2w次，点赞15次，收藏66次。一、scatterscatter方法主要用来做散点图展示，而plot方法主要用来做折线图展示，也可以用于散点图的展示。两个方法的参数基本是通用的。以scatter方法为例，常用参数包括：plt.scatter( ['x', 'y', 's=None', 'c=None', 'marker=None', 'cmap=None', 'norm=None', 'vmin=None', 'vmax=None', 'alpha=None', 'linewidths=None', 'verts=&._python scatter marker