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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

el-date-picker限制选择的时间范围

<el-date-pickersize"mini"v-model"dateTime"value-format"yyyy-MM-dd HH:mm:ss"type"datetimerange"range-separator"~"start-placeholder"开始日期"end-placeholder"结束日期":picker-options&quo…

mfc140u.dll丢失如何修复?解析mfc140u.dll是什么文件跟修复方法分享

大家好&#xff01;今天&#xff0c;我将和大家分享一下关于计算机中mfc140u.dll丢失的6种解决方法。希望我的分享能对大家在计算机使用过程中遇到问题时提供一些帮助。 首先&#xff0c;我想请大家了解一下什么是mfc140u.dll文件。mfc140u.dll是一个动态链接库文件&#xff0…

C++中基类和派生类的析构函数

和构造函数类似&#xff0c;析构函数也不能被继承。与构造函数不同的是&#xff0c;在派生类的析构函数中不用显式地调用基类的析构函数&#xff0c;因为每个类只有一个析构函数&#xff0c;编译器知道如何选择&#xff0c;无需程序员干涉。 另外析构函数的执行顺序和构造函数的…

Docker consul容器服务自动发现和更新

目录 一、什么是服务注册与发现 二、Docker-consul集群 1.Docker-consul 2.registrator 3.Consul-template 三、Docker-consul实现过程 四、Docker-consul集群配置 1.下载consul服务 2.web服务器启动多例nginx容器&#xff0c;使用registrator自动发现 3.使用…

opencv案例06-基于opencv图像匹配的消防通道障碍物检测与深度yolo检测的对比

基于图像匹配的消防通道障碍物检测 技术背景 消防通道是指在各种险情发生时&#xff0c;用于消防人员实施营救和被困人员疏散的通道。消防法规定任何单位和个人不得占用、堵塞、封闭消防通道。事实上&#xff0c;由于消防通道通常缺乏管理&#xff0c;导致各种垃圾&#xff0…

linux上vscode中.cpp文件中引入头文件.hpp时报错:找不到头文件(启用错误钵形曲线)

当在.cpp文件中引入系统给定的头文件时&#xff1a;#include < iostream > 或者引入自定义的头文件 &#xff1a;#include <success.hpp> 报错&#xff1a;找不到相应的头文件&#xff0c;即在引入头文件的改行底下标出红波浪线 解决方法为&#xff1a; &#…

【LeetCode算法系列题解】第11~15题

CONTENTS LeetCode 11. 盛最多水的容器&#xff08;中等&#xff09;LeetCode 12. 整数转罗马数字&#xff08;中等&#xff09;LeetCode 13. 罗马数字转整数&#xff08;简单&#xff09;LeetCode 14. 最长公共前缀&#xff08;简单&#xff09;LeetCode 15. 三数之和&#xf…

渗透测试漏洞原理之---【XSS 跨站脚本攻击】

文章目录 1、跨站 脚本攻击1.1、漏洞描述1.2、漏洞原理1.3、漏洞危害1.4、漏洞验证1.5、漏洞分类1.5.1、反射性XSS1.5.2、存储型XSS1.5.3、DOM型XSS 2、XSS攻防2.1、XSS构造2.1.1、利用<>2.1.2、JavaScript伪协议2.1.3、时间响应 2.2、XSS变形方式2.2.1、大小写转换2.2.2…

【c语言】结构体内存对齐,位段,枚举,联合

之前学完结构体&#xff0c;有没有对结构体的大小会很疑惑呢&#xff1f;&#xff1f;其实结构体在内存中存储时会存在内存对齐&#xff0c;捎带讲讲位段&#xff0c;枚举&#xff0c;和联合&#xff0c;跟着小张一起学习吧 结构体内存对齐 结构体的对齐规则: 第一个成员在与结…

计算机视觉-LeNet

目录 LeNet LeNet在手写数字识别上的应用 LeNet在眼疾识别数据集iChallenge-PM上的应用 LeNet LeNet是最早的卷积神经网络之一。1998年&#xff0c;Yann LeCun第一次将LeNet卷积神经网络应用到图像分类上&#xff0c;在手写数字识别任务中取得了巨大成功。LeNet通过连续使用…

Dubbo 应用切换 ZooKeeper 注册中心实例,流量无损迁移

首先思考一个问题&#xff1a;如果 Dubbo 应用使用 ZooKeeper 作为注册中心&#xff0c;现在需要切换到新的 ZooKeeper 实例&#xff0c;如何做到流量无损&#xff1f; 本文提供解决这个问题的一种方案。 场景 有两个基于 Dubbo 的微服务应用&#xff0c;一个是服务提供者&…

CXL 内存交织(Memory Interleaving)

&#x1f525;点击查看精选 CXL 系列文章&#x1f525; &#x1f525;点击进入【芯片设计验证】社区&#xff0c;查看更多精彩内容&#x1f525; &#x1f4e2; 声明&#xff1a; &#x1f96d; 作者主页&#xff1a;【MangoPapa的CSDN主页】。⚠️ 本文首发于CSDN&#xff0c…

Java 读取TIFF JPEG GIF PNG PDF

Java 读取TIFF JPEG GIF PNG PDF 本文解决方法基于开源 tesseract 下载适合自己系统版本的tesseract &#xff0c;官网链接&#xff1a;https://digi.bib.uni-mannheim.de/tesseract/ 2. 下载之后安装&#xff0c;安装的时候选择选择语言包&#xff0c;我选择了中文和英文 3.…

恒运资本:股票跌100%后怎么办?

在股票市场里&#xff0c;股票价格跌涨是日常的现象&#xff0c;有时候涨到令人惊喜&#xff0c;有时候却一路跌向谷底。股价跌到零的情况并不常见&#xff0c;可是&#xff0c;假如是跌了100%怎么办呢&#xff1f; 在探究该问题前&#xff0c;咱们需要了解股票跌100%是怎样的…

微服务之Nacos

1 版本说明 官网地址&#xff1a; https://github.com/alibaba/spring-cloud-alibaba/wiki/%E7%89%88%E6%9C%AC%E8%AF%B4%E6%98%8E 1.1 2021.x 分支 适配 SpringBoot 2.4, Spring Cloud 2021.x 版本及以上的Spring Cloud Alibaba 版本如下表&#xff08;最新版本用*标记&am…

腾讯音乐如何基于大模型 + OLAP 构建智能数据服务平台

本文导读&#xff1a; 当前&#xff0c;大语言模型的应用正在全球范围内引发新一轮的技术革命与商业浪潮。腾讯音乐作为中国领先在线音乐娱乐平台&#xff0c;利用庞大用户群与多元场景的优势&#xff0c;持续探索大模型赛道的多元应用。本文将详细介绍腾讯音乐如何基于 Apach…

LeetCode-455-分发饼干-贪心算法

题目描述&#xff1a; 假设你是一位很棒的家长&#xff0c;想要给你的孩子们一些小饼干。但是&#xff0c;每个孩子最多只能给一块饼干。 对每个孩子 i&#xff0c;都有一个胃口值 g[i]&#xff0c;这是能让孩子们满足胃口的饼干的最小尺寸&#xff1b;并且每块饼干 j&#xff…

企业级数据共享规模化模式

数据共享正在成为企业数据战略的重要元素。对于公司而言&#xff0c;Amazon Data Exchange 这样的亚马逊云科技服务提供了与其他公司共享增值数据或从这些数据获利的途径。一些企业希望有一个数据共享平台&#xff0c;他们可以在该平台上建立协作和战略方法&#xff0c;在封闭、…

联邦学习FedAvg-基于去中心化数据的深度网络高效通信学习

随着计算机算力的提升&#xff0c;机器学习作为海量数据的分析处理技术&#xff0c;已经广泛服务于人类社会。 然而&#xff0c;机器学习技术的发展过程中面临两大挑战&#xff1a;一是数据安全难以得到保障&#xff0c;隐私泄露问题亟待解决&#xff1b;二是网络安全隔离和行业…

使用飞桨实现的第一个AI项目——波士顿的房价预测

part1.首先引入相应的函数库: 值得说明的地方&#xff1a; &#xff08;1&#xff09;首先&#xff0c;numpy是一个python库&#xff0c;主要用于提供线性代数中的矩阵或者多维数组的运算函数&#xff0c;利用import numpy as np引入numpy&#xff0c;并将np作为它的别名 part…