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

  之前学习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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

第八章 贪心算法 part03 1005.K次取反后最大化的数组和 134. 加油站 135. 分发糖果 (day34补)

本文章代码以c为例&#xff01; 一、力扣第1005题&#xff1a;K 次取反后最大化的数组和 题目: 给你一个整数数组 nums 和一个整数 k &#xff0c;按以下方法修改该数组&#xff1a; 选择某个下标 i 并将 nums[i] 替换为 -nums[i] 。 重复这个过程恰好 k 次。可以多次选择…

kafka--技术文档--架构体系

架构体系 Kafka的架构体系包括以下几个部分&#xff1a; Producer. 消息生产者&#xff0c;就是向Kafka broker发送消息的客户端。Broker. 一台Kafka服务器就是一个Broker。一个集群由多个Broker组成。一个Broker可以容纳多个Topic。Topic. 可以理解为一个队列&#xff0c;一…

Spring Boot(Vue3+ElementPlus+Axios+MyBatisPlus+Spring Boot 前后端分离)【五】

&#x1f600;前言 本篇博文是关于Spring Boot(Vue3ElementPlusAxiosMyBatisPlusSpring Boot 前后端分离)【五】&#xff0c;希望你能够喜欢 &#x1f3e0;个人主页&#xff1a;晨犀主页 &#x1f9d1;个人简介&#xff1a;大家好&#xff0c;我是晨犀&#xff0c;希望我的文章…

PDF制作成翻页电子书

在日常工作中&#xff0c;大部分人使用的都是PDF文档发送给客户&#xff0c;但是PDF文档通常是静态的&#xff0c;缺乏交互性和视觉吸引力。那你有没有想过把它转换成翻页的电子书呢&#xff1f; 小编将告诉你操作步骤&#xff0c;非常简单 1.搜索FLBOOK在线制作电子杂志平台 …

oracle 基础运用2

首先在电脑上安装PLSQL developer&#xff0c;这个是oracle图形化连接工具&#xff0c;然后安装win64_11gR2_client&#xff0c;这个是orace客户端&#xff0c;安装完成后可以在cmd命令行输入sqlplus命令进行验证&#xff0c;如图表示安装成功。 作为sys的连接应该是SySDBA或Sy…

基于HarmonyOS ArkUI实现七夕壁纸轮播

七夕情人节&#xff0c;为了Ta&#xff0c;你打算用什么方式表达爱&#xff1f;是包包、鲜花、美酒、巧克力&#xff0c;还是一封充满爱意的短信&#xff1f;作为程序员&#xff0c;以代码之名&#xff0c;表达爱。本节将演示如何在基于HarmonyOS ArkUI的SwiperController、Ima…

服务器数据恢复-ESXi虚拟化误删除的数据恢复案例

服务器数据恢复环境&#xff1a; 一台服务器安装的ESXi虚拟化系统&#xff0c;该虚拟化系统连接了多个LUN&#xff0c;其中一个LUN上运行了数台虚拟机&#xff0c;虚拟机安装Windows Server操作系统。 服务器故障&分析&#xff1a; 管理员因误操作删除了一台虚拟机&#x…

Nacos基础(2)——nacos的服务器和命名空间 springBoot整合nacos 多个nacos配置的情况

目录 引出nacos服务器和命名空间Nacos服务器命名空间 springBoot整合nacosspringcloud Alibaba 版本与springcloud对应关系引包配置maincontroller 报错以及解决【报错】错误&#xff1a;缺少服务名称报错&#xff1a;9848端口未开放 启动测试引入多个nacos配置多个配置的情况没…

Apache StreamPark系列教程第二篇——项目打包和开发

一、项目打包 项目依赖maven、jdk8.0、前端(node、npm) //下载代码 git clone//maven打包相关内容 mvn -N io.takari:maven:wrapper //前端打包相关内容 curl -sL https://rpm.nodesource.com/setup_16.x | bash - yum -y install nodejs npm -v npm install -g pnpm默认是h2…

微服务分布式搜索引擎 ElasticSearch 查询文档

文章目录 ⛄引言一、DSL查询文档⛅DSL 查询分类 二、DSL查询实例⛅全文检索查询⏰精确查询⚡地理坐标查询⌚复合查询 ⛵小结 ⛄引言 本文参考黑马 分布式Elastic search Elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海…

Stable Diffusion 文生图技术原理

图像生成模型简介 图片生成领域来说&#xff0c;有四大主流生成模型&#xff1a;生成对抗模型&#xff08;GAN&#xff09;、变分自动编码器&#xff08;VAE&#xff09;、流模型&#xff08;Flow based Model&#xff09;、扩散模型&#xff08;Diffusion Model&#xff09;。…

深度学习3. 强化学习-Reinforcement learning | RL

强化学习是机器学习的一种学习方式&#xff0c;它跟监督学习、无监督学习是对应的。本文将详细介绍强化学习的基本概念、应用场景和主流的强化学习算法及分类。 目录 什么是强化学习&#xff1f; 强化学习的应用场景 强化学习的主流算法 强化学习(reinforcement learning) …

Flutter 逆向安全

前言&#xff1a; 前几天在 "学习" 一个项目&#xff0c; 发现是用 Flutter 开发的。之前研究过 flutter 的逆向&#xff0c;早期 Flutter 有工具可以通过快照进行反编译&#xff1a;《对照表如下》 新的版本开发者没有维护了。 目前没有很好的工具 可以对 Flutter 进…

网络地址转换NAT-动态NAT的使用范围和配置-思科EI,华为数通

网络地址转换NAT-动态NAT的使用范围和配置 什么是动态NAT&#xff1f; 使用公有地址池&#xff0c;并以先到先得的原则分配这些地址。当具有私有 IP 地址的主机请求访问 Internet 时&#xff0c;动态 NAT 从地址池中选择一个未被其它主机占用的 IP 地址一对一的转化。当数据会话…

Spring -学习笔记

文章目录 1. Spring介绍1.1 Spring的体系结构 2.DI/Ioc&#xff08;依赖注入/控制反转&#xff09;2.1 依赖及注解说明1. lombok2. spring-context 2.2 Bean和Spring 上下文的配置方式方式1&#xff1a;基于xml文件的配置方法2&#xff1a; 基于java注解配置bean方法3&#xff…

5G 数字乡村数字农业农村大数据中心项目农业大数据建设方案PPT

导读&#xff1a;原文《5G 数字乡村数字农业农村大数据中心项目农业大数据建设方案PPT》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。以下是部分内容&#xff0c; 喜…

Deep Learning With Pytorch - 数据预处理,以导入LUNA16数据集为例

文章目录 数据集简介什么是CT扫描&#xff1f;导入大型数据集并不是一份轻松的工作 在Jupyter Notebook中导入LUNA16数据集导入可能用到的第三方库&#xff1a;LUNA16存放路径&#xff1a;用 pandas 读取 candidates.csv&#xff1b;读取 annotations.csv导入subset0和subset1的…

Java中word转Pdf工具类

背景&#xff1a; 最近做的一个项目中&#xff0c;对于word转Pdf用的地方很多&#xff0c;特此记录 搭建总图&#xff1a; 代码部分&#xff1a; 1.需要的jar包&#xff1a; aspose-words-15.8.0-jdk16.jar 注&#xff1a;下载好这个jar包后&#xff0c;在项目的根目录新建一…

Django(8)-静态资源引用CSS和图片

除了服务端生成的 HTML 以外&#xff0c;网络应用通常需要一些额外的文件——比如图片&#xff0c;脚本和样式表——来帮助渲染网络页面。在 Django 中&#xff0c;我们把这些文件统称为“静态文件”。 我们使用static文件来存放静态资源&#xff0c;django会在每个 INSTALLED…

783页19万字行政服务中心一网通办政务服务应用平台建设方案

导读&#xff1a;原文《783页19万字行政服务中心一网通办政务服务应用平台建设方案》&#xff08;获取来源见文尾&#xff09;&#xff0c;本文精选其中精华及架构部分&#xff0c;逻辑清晰、内容完整&#xff0c;为快速形成售前方案提供参考。以下是部分内容&#xff0c; 第三…