layui框架学习(42:文件上传模块-上)

news2024/11/23 7:01:55

  之前学习asp.net core编程入门教程时结合layui测试过文件上传《基于ASP.Net Core和Layui的多文件上传》,但没有认真学习过layui的文件上传模块,本文开始,计划分两章学习并记录文件上传模块中的属性、事件及函数的使用方法。
  layui中的文件上传模块支持单文件上传、多文件上传,基于事件可以实现图片本地预览、上传文件列表等功能。单文件上传最简单的示例如下所示(结合参考文献2和5编写的)。

<button type="button" class="layui-btn" id="test">
 <i class="layui-icon">&#xe67c;</i>上传图片
</button>		
<script>
	layui.use(['upload','layer'], function(){
	  var upload = layui.upload;
	  var layer = layui.layer;
	   
	  var uploadInst = upload.render({
	    elem: '#test' 
	    ,url: 'http://localhost:5098/ECData/UploadFile/'
	    ,done: function(res){
	      layer.alert('文件上传完毕!');	
	    }
	    ,error: function(){
	      layer.alert('文件上传失败!');	
	    }
	  });
	});
</script>
[HttpPost]
public FileUploadResult UploadFile(IFormFile file)
{
    FileUploadResult result = new FileUploadResult();
    result.Code = 0;

    FileInfo fi = new FileInfo(file.FileName);
    string ext = fi.Extension;
    var orgFileName = fi.Name;
    var uploads = @"D:\test\UploadFile";
    var filePath = Path.Combine(uploads, orgFileName);
    using (var stream = new FileStream(filePath, FileMode.Create))
    {
        file.CopyToAsync(stream);
    }

    return result;
}

在这里插入图片描述

  基础参数url设置文件上传服务地址,服务接口至少返回code和msg属性,以便判断文件是否上传成功,以触发done或error事件。
  基础参数accept设置允许上传的文件类型,可选值有:images(图片)、file(所有文件)、video(视频)、audio(音频)。加入accept设置为images,选择文件时选择某一视频文件,则会提示以下信息。
在这里插入图片描述

  基础参数acceptMime设置选择文件时弹出的文件选择框中能选择的文件类型,如参考文献2中的示例:acceptMime: ‘image/jpg, image/png’,此时文件选择框只能选择jpg或png图片,而不是向上面的参数那样选完后再判断格式。其效果如下所示(实际测试时jpg格式没有显示,暂时不清楚怎么回事):
在这里插入图片描述

  基础参数exts设置允许上传的文件后缀名,一般结合 accept 参数类设定,如果有多种格式,采用’|'隔开,如jpg|png|gif|bmp|jpeg,提示效果与accept相似,也是选择文件后进行判读。
  基础参数auto设置选择文件后是否自动上传,默认值为true,如果为false,则需同时设置基础参数bindAction,用以指定上传按钮。
  基础参数size设置文件最大可允许上传的大小,单位 KB。
  基础参数multiple设置是否支持上传多个文件,默认值为false,同时基础参数number设置同时可上传的文件数量,默认值为0,不限制数量。
  基础参数drag设置是否接受拖拽的文件上传,默认值为true,即将本地文件拖拽到上传按钮处,松开鼠标即可触发文件上传操作。

参考文献:
[1]B站:layui框架精讲全套视频教程
[2]https://layui.gitee.io/v2/docs/
[3]https://layui.gitee.io/v2/demo/
[4]https://github.com/layui/layui/
[5]https://blog.csdn.net/weixin_43189545/article/details/109722105?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2aggregatepagefirst_rank_ecpm_v1~rank_v31_ecpm-7-109722105-null-null.pc_agg_new_rank&utm_term=asp.net%20core%20layui&spm=1000.2123.3001.4430

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/942349.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

1.1 数据库系统简介

1.1.数据库系统简介 前言&#xff1a; 数据库系统是一个软件系统&#xff0c;用于管理和操作数据库。它提供了一个组织良好、高效并能够方便存取的数据存储机制&#xff0c;并且能够支持各种数据操作、事务管理、并发控制和恢复功能。以下是数据库系统的一些主要特点和组件&a…

redis缓存雪崩、穿透、击穿解决方案

redis缓存雪崩、穿透、击穿解决方案 背景缓存雪崩缓存击穿缓存穿透总结背景 关于缓存异常,我们常见的有三个问题:缓存雪崩、缓存击穿、缓存穿透。这三个问题一旦发生,会导致大量请求直接落到数据库层面。如果请求的并发量很大,会影响数据库的运行,严重的会导致数据库宕机…

xsschallenge1~13通关详细教程

文章目录 XSS 挑战靶场通关level1level2level3level4level5level6level7level8level9level10level11level12level13 XSS 挑战靶场通关 level1 通过观察发现这个用户信息可以修改 那么我们直接输入攻击代码 <script>alert(/wuhu/)</script>弹框如下&#xff1a; …

烟花厂人员作业释放静电行为检测算法

烟花厂人员作业释放静电行为检测算法通过pythonyolo系列算法模型框架&#xff0c;烟花厂人员作业释放静电行为检测算法在工厂车间入口处能够及时捕捉到人员是否触摸静电释放仪。一旦检测到人员进入时没有触摸静电释放仪&#xff0c;系统将自动触发告警。Python是一种由Guido va…

第 1 章 绪论(计算多项式)

示例代码 1&#xff1a; /* 计算 1 - 1 / x 1 / x * x - ... */#include <stdio.h> #include <sys/timeb.h>int main(void) {double x;int n;printf("Please input x and n: ");scanf_s("%lf%d", &x, &n);struct timeb t1;ftime(&…

2023.8.27 关于 Junit5 详解

目录 引言 注解 断言 用例的执行顺序 参数化 测试套件 引言 Junit 是一个基于Java语言的单元测试框架Selenium 是一个用于Web应用程序测试的自动化测试框架结合二者能让我们的 Web自动化测试 更加完善和全面 注意&#xff1a; 本文所讲的内容&#xff0c;均基于以下依…

机器视觉工程师永不为奴,他们是肯干肯出差肯加班肯拼命肯被使唤肯被叼

​ 永不为奴&#xff0c;为什么这样呐喊&#xff0c;真的很难做到。我们职业机器视觉工程师&#xff0c;本身职业具有一大特点就是专业性。 但是我们机器视觉工程师是专业技术绝不苟同于不是技术人员言语&#xff0c;我们很专业。 肯出差&#xff1a; 设备去那里&#xff0c;…

启莱OA CloseMsg.aspx SQL注入

子贡曰&#xff1a;“贫而无谄&#xff0c;富而无骄&#xff0c;何如&#xff1f;”子曰&#xff1a;“可也。未若贫而乐&#xff0c;富而好礼者也。” 子贡曰&#xff1a;“《诗》云&#xff1a;‘如切如磋&#xff0c;如琢如磨。’其斯之谓与&#xff1f;”子曰&#xff1a;“…

mybatis plus新版代码生成器,类型转换处理器ITypeConvertHandler使用

目录 引言关键代码源码分析记录一坑类型转换的第二种方式完整源码地址 引言 当默认生成的数据类型不满足时&#xff0c;就需要自定义指定要生成的类型 关键代码 FastAutoGenerator.create(url, username, password).dataSourceConfig(builder -> {builder.typeConvertHandl…

Python计算加速利器

迷途小书童的 Note 读完需要 6分钟 速读仅需 2 分钟 1 简介 Python 是一门应用非常广泛的高级语言&#xff0c;但是&#xff0c;长久以来&#xff0c;Python的运行速度一直被人诟病&#xff0c;相比 c/c、java、c#、javascript 等一众高级编程语言&#xff0c;完全没有优势。 那…

记一次因函数入参没有带类型所引发的问题

工作中&#xff0c;sit测试中&#xff0c;测试突然发现页面异常。经排查&#xff0c;是函数参数没有定义类型所以&#xff0c;dart默认是dynamic类型&#xff0c;而dynamic编译阶段不检查类型&#xff0c;正是由于编译阶段不检查类型&#xff0c;很明显的错误也只能运行的时候才…

【Axure高保真原型】中继器网格图片拖动摆放

今天和大家分享中继器网格图片拖动摆放的原型模板&#xff0c;我们可以通过鼠标拖动来移动图片&#xff0c;拖动过程其他图标会根据图片拖动自动排列&#xff0c;松开鼠标是图片停放在指定位置&#xff0c;其他图标自动排列。那这个模板是用中继器制作的&#xff0c;所以使用也…

C# 跨线程访问窗体控件

在不加任何修饰的情况下&#xff0c;C# 默认不允许跨线程访问控件&#xff0c;实际在项目开发过程中&#xff0c;经常使用跨线程操作控件属性&#xff0c;需要设置相关属性才能正确使用&#xff0c;两种方法设置如下&#xff1a; 方法1&#xff1a;告诉编译器取消跨线程访问检…

XML—标记语言

什么是XML&#xff1f; Extensible Markup Language&#xff0c;可扩展标记语言。 那标记语言是什么&#xff1f; 用文字做标记表达一些效果或携带一些数据。比如&#xff1a;HTML、XML 我的理解&#xff1a;用倾盆大雨表达雨很大 那XML为什么说是可扩展的呢&#xff1f; 还…

ethers.js9、过滤事件

在 合约监听 的基础上,我们拓展一下,在监听的过程中增加过滤器,监听指定地址的转入转出。 过滤器 当合约创建日志(释放事件)时,它最多可以包含[4]条数据作为索引(indexed)。索引数据经过哈希处理并包含在布隆过滤器中,这是一种允许有效过滤的数据结构。因此,一个事件…

Java学数据结构(4)——散列表Hash table 散列函数 哈希冲突

目录 引出散列表Hash table关键字Key和散列函数(hash function)散列函数解决collision哈希冲突&#xff08;碰撞&#xff09;分离链接法(separate chaining)探测散列表(probing hash table)双散列(double hashing) Java标准库中的散列表总结 引出 1.散列表&#xff0c;key&…

SQLite数据库C_C++接口(保姆级API应用 1.4W字)(全网最详细介绍,学完必掌握)

目录 sqlite3的C/C API应用 前言 SQLite3库安装 API函数 打开、关闭、错误处理 打开 返回值 关闭 错误调试 实际应用 执行SQL&#xff08;DDL、DML&#xff09; API介绍 实际应用 回调函数查询 API介绍 实际应用 全缓冲查询 API介绍 实际应用 字节缓冲查询…

【Linux】【驱动】自动创建设备节点

【Linux】【驱动】自动创建设备节点 续驱动代码操作指令linux端从机端 续 这里展示了如何自动的方式去创建一个字符类的节点 下面就是需要调用到的程序 函数 void cdev_init(struct cdev *, const struct file_operations *);第一个参数 要初始化的 cdev 第二个参数 文件操作…

【微服务部署】01-Kubernetes部署流程

文章目录 部署1. Kubernetes是什么2. Kubernetes的优势3. 环境搭建4. 应用部署 部署 1. Kubernetes是什么 Kubernetes是一个用于自动部署、扩展和管理容器化应用程序的开源系统 2. Kubernetes的优势 自动化容器部署资源管理与容器调度服务注册发现与负载均衡内置配置与秘钥…

STM32 CUBEMX CAN通信数据发送失败原因分析

CAN通信是一种数据通信协议&#xff0c;用于在不同设备之间进行通信。它是一种高效的、实时的、可靠的、多主机的、串行通信系统&#xff0c;通常用于汽车电子、工业自动化等领域。CAN通信协议是由德国BOSCH公司于1986年引入&#xff0c;并在欧洲和日本广泛使用。CAN通信具有独…