bootstrap fileinput.js 文件上传 文件名称的问题

最新推荐文章于 2024-07-20 15:49:14 发布
最新推荐文章于 2024-07-20 15:49:14 发布
阅读量4.3k 收藏 4
点赞数 1
分类专栏： Datatables
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tanhongwei1994/article/details/85284785
版权

修改 fileinput.js中的_slugDefault方法

初始方法：

_slugDefault: function (text) {
return isEmpty(text) ? '' : String(text).replace(/[\-\[\]\/\{}:;#%=\(\)\*\+\?\\\^\$\|<>&"']/g, '_');
}

 

修改后的方法：

 //使特殊字符不被替换 
 _slugDefault: function (text) {
            return isEmpty(text) ? '' : String(text);
        },

 

小布2025
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap中fileinput上传文件时，文件名中文，只显示后缀解决办法
腾龙凌九霄
12-24 5164
BUG描述：    上传或者导入文件名为中文的文件时，只显示后缀，数字或字母的文件名则正常显示。 原因：  bootstrap支持国际化，默认fileinput.js中支持的是英文，所以支持数字和字母的文件名，中文名称则根据正则表达式，替换了。 解决方案： 方案一： 找到fileinput.js文件打开，搜索slugDefault关键字，找到下面这个方法 slugDefault: ...
bootstrap中的fileInput上传文件时，文件名称中有-（中划线）改为了_下划线
weixin_30698527的博客
07-15 638
原因是插件自动替换； fileInput.js 原来是注释掉的那一部分，改成这样之后就可以了。 转载于:https://www.cnblogs.com/love-dream-88/p/11187094.html
万字长文解析Bootstrap权威教程：从入门到精通逐步掌握前端开发框架
最新发布
科技改变人类，技术成就未来
07-20 972
Bootstrap 是世界上最受欢迎的前端框架之一，由 Twitter 团队开发和开源。它使得开发响应式、移动优先的网站变得简单和快速。本文将为初学者提供一个全面的 Bootstrap 入门指南，覆盖从基本概念到高级功能，以及如何在实际项目中应用 Bootstrap。
bootstrap fileinput 修改源文件可以上传#、&、+特殊字符文件名文件
ZHANGLIZENG的博客
11-08 2034
1.找到fileinput.js文件的文件名特殊符号替代为_代码： _slugDefault:function(e){return i.isEmpty(e)?"":String(e).replace(/[\-\[\]\/\{}:;#%=\(\)\*\+\?\\\^\$\|&lt;&gt;&amp;"']/g,"_")} 2.若要修改为可以上传所有的特殊符号文件名，则修改为： _slugDef...
spring cloud 修改bootstrap文件的文件名
sayyy的专栏
12-10 212
略
获取input上传文件时js获取文件名
lingle1的博客
04-18 2973
使用input标签的type=“file”，上传文件，获取上传文件的文件名和扩展名； <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #mybtn{ ...
BootStrap fileinput.js文件上传组件实例代码
12-11
1.首先我们下载好fileinput插件引入插件 <span xss=removed><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput....script type="text/javascript" src="fileinput/js/fileinput_locale_zh.j
最好用的Bootstrap fileinput.js文件上传组件
10-20
Bootstrap fileinput.js是一个基于Bootstrap框架开发的文件上传组件，具有丰富的功能和良好的兼容性，可以提供图片展示、上传等功能。该组件支持多语言，易于扩展和定制，适合在各种Web项目中使用。 使用该组件首先...
bootstrapfileinput实现文件自动上传
09-01
Bootstrap FileInput 是一个流行的前端文件上传插件，它与 Bootstrap 框架完美结合，提供了丰富的功能和美观的用户界面。这个插件不仅支持单选文件上传，还支持多选，以及预览不同类型的文件（如图片、文档、音频、...
Bootstrap-fileinput简单实现下载功能
CYCHEN520的博客
04-07 4509
Bootstrap-fileinput简单实现下载功能 bootstrap-fileinput是一款非常优秀的HTML5文件上传插件，支持文件预览、多选等一系列特性。可以查看中文文档详细了解： http://www.bootstrap-fileinput.com/ 但是笔者有时候需要将文件上传之后经过处理后提供文件的下载功能，而网上的自定义下载按钮实现起来还是不够简单，因此笔者在这里提供一种十...
bootstrap fileinput上传,下载
jokewinl的博客
03-08 4364
需引入fileinput.js和fileinput.min.css,地址:https://gitee.com/jolone/source.git &amp;amp;lt;div class=&amp;quot;change_Pass_style&amp;quot; id=&amp;quot;fileUpload&amp;quot;&amp;amp;gt; &amp;amp;lt;!--&amp;amp;lt;div class=&amp
记录使用bootstrap-fileinput插件遇到的问题
LiuQjie的博客
12-23 2375
前言 1、传额外参数 uploadExtraData：初始化时只能获取表单赋值数据，未赋值或修改的数据无法获取，所以需要用一个回掉函数 2、去除按钮 layoutTemplates：{ actionUpload: ''//去除上传预览缩略图中的上传按钮 close: ''//去除右上角X 清空文件按钮 //其它按钮去除，请查看源码中的【layoutTemplates】 } 3、上传成功后调用移除按钮 $(".fileinput-remove-button").click(); 4、实.
对input中type=“file“控件修改上传文件名
lt_1111的博客
09-28 4363
我们都知道input中file的name的属性是只读的，要修改名称，需要把file的name属性设置为可写，具体实现如下： <input type="file" id="files" readonly="readonly" onchange="fileUpload()" /> function fileUpload(){ let $files = $("files"); if(files.length > 0){ let form = new For
Bootstrap文件上传（Custom file input）显示文件名及中文化
qq_34559890的博客
04-29 9800
先介绍显示文件名，Bootstrap官网上的Custom file input在文件上传时是支持文件名显示的，效果是下面这样： 但当我将这些用在自己页面上时，却显示不了文件名，只有当鼠标放在上传框时，才会有文件名的提示： 通过下面的代码可以让Bootstrap上传框显示上传文件的文件名，当input发生改变时会调用showFilename函数显示文件名。 <!-- 以下代...
VS2017+QT5纯代码编程——基础知识
qq_44277244的博客
08-13 1035
​ 基础知识 一、布局 1、布局管理器 注意：MainWindow有自己默认的布局管理器 1.1 分类 （1）QHBoxLayout 水平布局 略 （2）QVBoxLayout 垂直布局 略 （3）QGridLayout 格栅布局 理解为格子（几行几列）： gridLayout ->addWidge();三个参数分别是添加的部件、横向位置、纵向位置。 如图，是一个3*3的格栅布局，每个格子的位置与矩阵类似： 布局的第一行添加部件： gridL
bootstrap fileinput.js扩展-增加对文件名特殊字符过滤
woshiyueyue的博客
12-14 2383
在项目中使用bootstrap fileinput.js作为文件上传插件的过程中，需求提出如果文件名中包含某些特殊字符，例如￥、#等，则不允许用户上传此类文件。fileinput.js本身并不支持文件名的过滤，因此考虑对其进行扩展。具体如下： 修改fileinput.js源代码： 在$.fn.fileinput.defaults中增加notallowedFilenameExtensions:n
BootStrap-fileInput使用
songziyuan_的博客
07-12 848
首先引入需要使用的文件 <script type="text/javascript" src="<%=request.getContextPath()%>/js/jq/jquery-3.3.1.min.js"></script> <link href="<%=request.getContextPath()%>/js/bootstr...
fileinput.js 单文件上传
05-17
fileinput.js 是一个开源的 JavaScript 库，用于在 web 页面上实现单文件上传功能。使用该库可以实现以下功能： 1. 支持多种文件类型，包括图片、视频、音频、文档等； 2. 支持文件拖放上传和浏览器文件选择上传； 3. 支持文件预览功能，可以在上传前预览文件； 4. 支持文件大小限制和文件数量限制； 5. 支持上传进度条显示； 6. 支持自定义上传路径和文件命名规则。 下面是一个简单的示例代码，演示如何使用 fileinput.js 实现单文件上传功能： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单文件上传</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/css/fileinput.min.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.0.9/js/fileinput.min.js"></script> </head> <body> <div class="container"> <h3>单文件上传</h3> <input id="file" type="file" name="file" data-show-preview="true"> </div> <script> $(document).ready(function() { $("#file").fileinput({ uploadUrl: "/upload", allowedFileExtensions: ['jpg', 'png', 'gif'], maxFileSize: 1000, maxFilesNum: 1 }); }); </script> </body> </html> ``` 在上面的代码中，我们引入了 fileinput.js 和 jQuery 库，然后创建了一个文件选择框，并将其初始化为 fileinput 组件。在初始化时，我们指定了上传路径、允许上传的文件类型、文件大小限制和文件数量限制。 开发人员需要根据自己的实际需求进行配置和开发。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值