jasny-bootstrap组件-文件上传

news2024/11/19 23:38:16

今天和大家分享jasny-bootstrap如何实现文件上传,以及同form表单同时提交处理。
目前各大网站关于jasny-bootstrap上传文件的案例demo少之又少,就连若依也只是一笔带过,只是做了一个纯效果展示。

经过博主的一番查阅文档,查找案例,终于给搞出来了,在这里呢和大家分享一下。

1:首先引入jasny-bootstrap的js和css。

js和css可以从jasny文档去引用,这里就不多说。

2:jasny关于文件上传的前端代码

按照文档给的demo案例,结合自己的情况进行改造即可

在这里插入图片描述

3:选择文件后触发事件,可以在这里进行业务,其中e.target.files会获取到文件数组。

选择文件后,我们通过 change.bs.fileinput事件进行上传文件的业务处理。

通过e.target.files获取文件数组,这样我们就拿到文件了,若是需要单独上传,则可以在这里写业务。

但我们要做的是同form表单一同提交,所以不在这里做处理。

在这里插入图片描述

4:关于提交form表单如何和文件一同提交

在这里插入图片描述
5:后端处理 ;通过HttpServletRequest接收文件

在这里插入图片描述

一个完整的流程就这样出来了,注意的是,jasny组件我这里是新增和修改是用的同一个页面,

所以做了jasny的回显图片处理。

当然若是有小伙伴需要设置上传文件类型,可以添加accept属性。

比如我们只想让它上传图片类型,那么我们可以这样写:

   <input type="file"  id="photoID" name="file1" accept="image/*">

这样,在选择文件时就只能选择图片了。(其它类型文件自动给你隐藏了)

在这里插入图片描述

好了,今天的分享到此结束了。欢迎大家留言互相交流讨论。

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

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

相关文章

【Android安全】Flutter app逆向

使用《Flutter逆向助手》逆向Flutter app 参考&#xff1a;https://www.bilibili.com/video/BV1SM41147g5 flutter app特征&#xff1a; lib/armeabi-v7a/下面有libapp.so和libflutter.so 逆向分析工具&#xff1a; 看雪&#xff1a;Flutter逆向助手 可以解析libapp.so文件…

OpenCV——《直方图操作》和《模版匹配》

1.直方图均衡化 img cv2.imread(clahe.jpg,0) plt.hist(img.ravel(),256) plt.show() #旨在使得图像整体效果均匀&#xff0c;黑与白之间的各个像素级之间的点更均匀一点。 equ cv2.equalizeHist(img) plt.hist(equ.ravel(),256) plt.show() #进行对比&#xff0c;均值化之后…

mapbox图层层级问题

如果在项目之初我们没有设计好图层的问题&#xff0c;那么大概率我们会与到预期图层在别的图层下面的问题&#xff0c;这是需要使用addlayer、movelayer方法来调整图层的位置了。 一般而言先添加的图层在显示的时候在后添加图层的下面&#xff0c;例如下面的代码&#xff1a; …

ChatGPT伪原创文章的应用与发展

ChatGPT是一种基于人工智能技术的自然语言处理模型&#xff0c;它能够生成逼真的、具有上下文连贯性的文本。近年来&#xff0c;ChatGPT在各个领域的应用越来越广泛&#xff0c;其发展潜力也逐渐被人们所认识。本文将从多个方面对ChatGPT的应用与发展进行详细阐述。 ChatGPT在…

人脸考勤签到进阶篇

目录 签到业务流程说明 一、需求介绍 二、如何获取地理信息&#xff1f; 三、如何判定某地区新冠疫情的风险等级&#xff1f; 开通腾讯位置服务 二、腾讯位置服务SDK 把定位坐标转换成真实地址 一、获取定位坐标 uni.authorize(OBJECT) 二、编辑签到页面 在Docker中…

如何在 Spring Boot 中使用反向代理

如何在 Spring Boot 中使用反向代理 介绍 在分布式系统中&#xff0c;反向代理是一项非常重要的技术。通过反向代理&#xff0c;可以将客户端的请求转发到后端的多台服务器上&#xff0c;实现负载均衡和故障转移等功能。本文将介绍如何在 Spring Boot 应用中使用反向代理。 环…

微信小程序判断用户是否授权定位

1、判断用户是否授权定位 checkLocationAuth() {let that thiswx.getSetting({success: (res) > {let authSetting res.authSettingif (authSetting[scope.userLocation]) {that.getCurrentLocation()} else if (authSetting[scope.userLocation] false) {wx.showModal(…

yxcms弱口令至getshell 漏洞复现

为方便您的阅读&#xff0c;可点击下方蓝色字体&#xff0c;进行跳转↓↓↓ 01 环境部署02 漏洞配置03 利用方式04 修复方案 01 环境部署 &#xff08;1&#xff09;yxcms yxcms 基于 PHPMySQL 开发&#xff0c;这是一个采用轻量级 MVC 设计模式的网站管理系统。轻量级 MVC 设…

【wifi模块应用】基于路由模块SKW92A的4G转WiFi、无线中继、视频传输方案

在家用WiFi&#xff0c;外出用4G&#xff0c;已经成为时下很多人的常规操作&#xff0c;尤其在室内环境中&#xff0c;无论是办公、居家&#xff0c;还是在高铁站、飞机场&#xff0c;亦或是酒店、咖啡馆等公共场所&#xff0c;我们都会下意识地主动连上WiFi。据悉&#xff0c;…

lenovo联想Yoga 13s 2021 AMD平台ACN版(82CY)原厂预装Win11系统镜像原装OEM恢复出厂状态

LENOVO联想笔记本电脑&#xff0c;Yoga 13s 2021 AMD平台ACN版(82CY)原装出厂Windows11系统&#xff0c;恢复原厂OEM预装专用系统 系统自带所有驱动、出厂主题壁纸LOGO、Office办公软件、联想电脑管家等预装程序 所需要工具&#xff1a;16G或以上的U盘 文件格式&#xff1a;…

星辰秘典:探索Python项目的神秘力量——贪吃蛇

✨博主&#xff1a;命运之光 &#x1f338;专栏&#xff1a;星辰秘典&#xff1a;探索Python项目的神秘力量 &#x1f433;专栏&#xff1a;web开发&#xff08;html css js&#xff09; ❤️专栏&#xff1a;Java经典程序设计 ☀️博主的其他文章&#xff1a;点击进入博主的主…

Hive(10):Hive分桶表

1 分桶表的概念 分桶表也叫做桶表,叫法源自建表语法中bucket单词,是一种用于优化查询而设计的表类型。分桶表对应的数据文件在底层会被分解为若干个部分,通俗来说就是被拆分成若干个独立的小文件。在分桶时,要指定根据哪个字段将数据分为几桶(几个部分)。2 分桶表的规则 …

torch.cuda模块获取信息

判断GPU是否可用 import torch print(torch.cuda.is_available())如果输出True则表示可以使用GPU 输出可使用GPU的数量 import torch print(torch.cuda.device_count())输出1就表示只有一块可以用 输出GPU的名字 import torch print(torch.cuda.get_device_name())如果有…

如何在 VSCode 去调试 Redis源码

学习使用 Redis 时&#xff0c;从 GitHub 下载 Redis 源码是个不错的选择。在下载后&#xff0c;通过创建 task.json 和 launch.json 两个文件&#xff0c;可以方便地在本地进行 Redis 的编译、运行和调试。通过这些步骤&#xff0c;你可以更好地理解 Redis 的内部实现&#xf…

小程序 css flex的子元素图片被周边元素text挤压变形

flex下子元素会自动拉伸&#xff0c;第一个子元素image设置了100 * 100还是被后面的text过长文字挤压了。 解决&#xff1a; 方法1&#xff1a; 让图片不自动拉伸加上 flex:noe 方法2&#xff1a; flex下面所有的子元素都设置宽度&#xff0c;这个会比较麻烦&#xff0c;需要…

如何在Microsoft Excel中迅速冻结首行和末行

如果你正在处理一个大型电子表格&#xff0c;那么冻结某些行或列会很有用&#xff0c;这样当你滚动浏览工作表的其余部分时&#xff0c;它们会留在屏幕上。 当你在 Excel 中滚动浏览大的工作表时&#xff0c;你可能希望保留一些行或列&#xff0c;例如页眉。Excel 允许你通过以…

useReducer可配合react-redux方案

接下来 我们来看 useReducer 这个属性 配合 react-redux 就会非常好用 那么 我们编写一段这样代码 import React, { useState } from react;const ContDom () > {const [count, setCount] useState(0);return (<div>cont值{ count }<button onClick {()>{ …

DevSecOps实践:如何在研发过程中做好供应链安全

DevSecOps与供应链安全 很多企业都建立了DevOps流程&#xff0c;但安全基本还处在流程之外&#xff0c;没有融入传统DevOps流程&#xff0c;导致安全一直都是敏捷交付的瓶颈。本篇内容我们将从DvSecOps和软件供应链安全的角度来谈谈研发过程中的安全问题。 01 DevSecOps——供…

Self-Instruct 论文解读:利用大模型自己给自己生成指令数据,指令数据自动生成

总览 大规模“指令调整”的语言模型&#xff0c;即指令微调的LLM&#xff0c;已经表现出非凡的零样本能力&#xff0c;尤其是推广新任务上。 然而&#xff0c;这些模型严重依赖于人类编写的指令数据&#xff0c;而这些数据通常在数量、多样性和创造力方面受到限制&#xff0c;…