bootstrap file-input 图片批量上传问题 10C

我用该bootstrap file-input插件的时候,多个图片上传出现以下情况,大侠求助:
图片说明
图片说明

2个回答

代码和样式贴出来看一下

wjh_penglei
honeyBack 代码贴上 了 ,能看看是什么问题吗
大约 4 年之前 回复

静态页面代码:

    <form name="queryForm"  id="queryForm" action="${basePath}sns/album/Album/stulist.do"  method="post">

          <div style="margin-top:20px; margin-right:30px;margin-left:30px;"  class="center-block"  id="inside">
             <ul class="list-unstyled"   style="margin-bottom:70px;">
              <li>
                  <ul class="list-inline">
                  <a type="button"  class="btn btn-warning"  onclick="op()">  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>选择上传图片</a>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <a type="button"  class="btn btn-info"  id="reView" onclick="goReView()">  <span class="glyphicon glyphicon-facetime-video" aria-hidden="true"></span>&nbsp;进入相册查看</a>
                  </ul>
              </li>
              <li id="pho"  style="margin-top:20px;background:#ffffff;"></li>  
             </ul>
           </div>
          </form>

点击选择上传图片 进行jquery的op方法操作,如下:

 function op(){
     $("#pho").html('');

    var str = ''; 
     str = str+'<div class="form-group">';
     str = str+'<input id="file-Portrait1" class="file" type="file"  name="file"  multiple data-preview-file-type="any"   data-preview-file-icon=""  data-max-file-count="10">';
     str = str+'</div>';

     $("#pho").append(str);

     $("#file-Portrait1").fileinput({
         uploadUrl: 'batchUpload.do?albumId='+$("#albumInfo").val(), // you must set a valid URL here else you will get an error
         allowedFileExtensions : ['jpg', 'png','gif'],
         overwriteInitial: false,
         maxFileSize: 3000,
         maxFilesNum: 10,
         previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", 
         //allowedFileTypes: ['image', 'video', 'flash'],
         slugCallback: function(filename) {

             return filename.replace('(', '_').replace(']', '_');
         }
        }); 

}

然后就完了,根本没额外加什么样式。

@save4me 有方法么

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Bootstrap插件File Input图片上传报错?怎么解决
![图片说明](https://img-ask.csdn.net/upload/201604/21/1461218444_882925.png)
bootStrap-table 如何冻结最后一列
bootStrap-table 如何冻结最后一列?网上说了一个引入bootstrap-table-fixed-columns.js文件但是,不能冻结最后一列
bootstrap modal-body中嵌套table网格问题
如图在<script>中实现modal-body中的table怎么能让th td正确的对准排版,jQuery1.7,bootstrap 还有如何在table中触发单选事件来获取一行tr的第一个td的值![图片说明](https://img-ask.csdn.net/upload/201703/03/1488528377_356405.jpg)
bootstrap中input-group-addon和glyphicon配合后与文本框不对齐问题
我的代码: ``` <div class="container"> <form action=""> <div class="input-group"> <lable class="control-label sr-only">用户名</lable> <span class="input-group-addon glyphicon glyphicon-user"></span> <input type="text" class="form-control"> </div> </form> </div> ``` ![图片说明](https://img-ask.csdn.net/upload/201709/26/1506423845_630769.png) 但是当我把glyphicon的position:relative去掉就正常了,请大神解答下
bootstrap中input与lable同行的问题
![图片说明](https://img-ask.csdn.net/upload/201509/07/1441594407_141829.png) 这样Lable 和 input在一行的怎么用bootstrap里面的类来做呢,我像就是通过栅格系统可以调整input的宽度,然后用了 form-inline之后 input的宽度好像已经固定了,特别小~ 怎么办?
bootstrap-tree-table不显示数据
前段代码 <!DOCTYPE html> <html lang="zh" xmlns:th="http://www.thymeleaf.org"> <head> <th:block th:include="include :: header('学生列表')"/> </head> <body> <div> <table id="bootstrap-tree-table"></table> </div> <th:block th:include="include :: footer"/> <script th:inline="javascript"> var prefix = ctx + "system/student" $(function () { var options = { url: prefix + "/studentlist", columns: [ { field: 'Sno', title: '学生学号', }, { field: 'Sname', title: '学生姓名', }, { field: 'Ssex', title: '学生性别', }, { field: 'Sclass', title: '学生班级', }, { field: 'Birth', title: '学生生日', }, { field: 'Saddress', title: '学生地址', }, { field: 'Sdept', title: '学生学院', }, { field: 'Stime', title: '入学时间', }] }; $.treeTable.init(options); }); </script> </body> </html> 显示读出了数据 ![图片说明](https://img-ask.csdn.net/upload/201912/17/1576546625_694186.png) 但是页面上没有显示 ![图片说明](https://img-ask.csdn.net/upload/201912/17/1576546689_836461.png)
bootstrap-table的post数据问题
要怎么把post的数据从{"page":1,"rows":10}变为page=1&rows=10呢??因为bootstrap-tale中的queryParams:queryParams的参数是一个 function queryParams(){ var data={ page:1, rows:10 } }
Bootstrap-vue版本,如何编辑scss?
使用的是:https://bootstrap-vue.js.org/docs/ ,不是bootstrap,是without jquery版本的。 然后用vue-cli3 初始化项目添加完bootstrap-vue版本后,没看到能编辑scss的地方。我需要定制bootstrap,但是已经没看到跟bootstrap4.3一样的scss了。有遇到过的兄弟么,去哪里编辑bootstrap的scss啊。 问题是根源是: 现在bootstrapV5已经出现了 without jquery的版本,不想要jquery集成在vue里,所以就使用了这个bootstrap-vue的官方版本。这就导致了看不到scss了,也可能是我自己没找到如何编辑这个bootstrap-vue的官方版本
bootstrap-datatimepacker当选择时间面板
bootstrap-datatimepacker当选择时间面板(select time)时为什么会清空所有input标签输入的内容?现在是我不想让它清空所有input标签输入的内容,请问如何解决呢?bootstrap-datatimepacker当选择时间面板(select time)时为什么会清空所有input标签输入的内容?现在是我不想让它清空所有input标签输入的内容,请问如何解决呢?
kafka_2.11-1.0.0在控制台kafka-console-consumer消费者消费的时候zookeeper 和 bootstrap-server区别
今天试了两个kafka的版本都存在这个问题 1、创建一个topic > kafka-topics.bat --create --partitions 1 --replication-factor 1 --topic test --zookeepe r localhost:2181 2、对改topic进行消息写入 > kafka-console-producer.bat --broker-list localhost:9092 --topic test 3,控制台形式消费该topic消息,--zookeeper localhost:2181 这种能正常消费消息 > kafka-console-consumer.bat --zookeeper localhost:2181 --topic test --from-beginning 4,同样是控制台消费,--bootstrap-server localhost:9092,这样就收不到消费消息 > kafka-console-consumer.bat --bootstrap-server localhost:9092 --topic test --from-beginn ing 5,今天在windows 和 虚拟机linux环境下 都存在这个问题,而且也试了两个kafka版本 6,stackoverflow也看到有人出现这个问题 > https://stackoverflow.com/questions/41774446/kafka-bootstrap-servers-vs-zookeeper-in-kafka-console-consumer ![老外也有遇到这个问题](https://nim.nosdn.127.net/NDA3MzIzNw==/bmltYV8yMzg4MDEzNjMxXzE1NjU0NDUxOTI1NjdfMmYxMDRjYjUtZTVjNS00YjM4LWFjMzgtOWFlZTdlYWY4ZDdk) 有无人遇到一样的问题,怎么让 --bootstrap-server localhost:9092 这种也能消费到消息
使用bootstrap data-toggle填写内容出错
![图片说明](https://img-ask.csdn.net/upload/201709/15/1505469422_665917.png) 我在一个页面中放了三个表单,但是1和2里面的文本框都无法编辑,输入的数据全部跑到3里面去了
Springboot项目中多个bootstrap.yml是否都会被加载?
Springboot项目下配置文件如下: application.yml bootstrap.yml bootstrap-dev.yml bootstrap-prod.yml bootstrap-local.yml bootstrap-test.yml 开发、生产、本地、测试多个环境的配置文件都在一个目录下. 问题1、未做pom文件的配置控制、运行当前项目是否只加载了application.yml和bootstrap.yml,其他的bootstrap-dev.yml等配置文件都未被加载? 问题2、bootstrap.yml和bootstrap-dev.yml存在相同的MQ消费者名称,会导致MQ部分消费吗?
关于在jsp界面中使用bootstrap-table插件的分页问题
最近在做一个比较大的项目,用了bootstrap-table这个插件来处理表格,方便很多。但是在分页的时候,不知道前端jsp界面和后端servlet分别怎么写。后端是不是只要传递json给前端就可以,前端分页怎么发送请求到后端?求大神指教,很着急!!!
bootstrap-switch中三选一的问题
今天遇到了一个问题,卡了很久。 当存在三个bootstrap-switch时,要求其中一个打开的时候(任意一个),其余两个状态关闭。 在页面中的显示:![图片说明](https://img-ask.csdn.net/upload/201607/14/1468496796_18647.png) 在jsp中的代码为:![图片说明](https://img-ask.csdn.net/upload/201607/14/1468496969_840920.png) bootstrap-switch中的代码是公司给的封装好的模板里面自动生成
请教bootstrap-fileinput-master 多文件上传插件大神
![图片说明](https://img-ask.csdn.net/upload/201507/23/1437643635_674339.png) 总是提示没有选择文件,请问如何解决.要准确答案.
bootstrap-daterangepicker 显示问题
bootstrap-daterangerpicker在ie上面点击起码能出来,但是在firefox上面完全看不到,ie上面显示的是竖的,完全不是想要的样子,在属性那边随便加一个就显示不出来了![图片说明](https://img-ask.csdn.net/upload/201607/23/1469244973_334641.png)
请教bootstrap-select问题
我在html里面使用bootstrap-select 在本页面显示正常,点击也能显示下拉数据,但是当我在另一个页面使用jquery的load方法局部刷新这个页面的时候,就显示不出来了,网上查了资料说$('.selectpicker').selectpicker('refresh')一下,这下可以显示出来了,但是无法点击下拉框![图片说明](https://img-ask.csdn.net/upload/201711/30/1512029776_782224.jpg),火狐的控制台报这个错误
求助!有人有bootstrap-datepicker完整的源代码吗?
本人现在急需bootstrap-datepicker插件的完整代码,请各位大佬们帮忙啊
为什么使用jQuery1.7.2版本时,bootstrap-table数据不显示?
使用jQuery1.9以上版本时,bootstrap-table数据会显示;换成jQuery1.7.2版本时,bootstrap-table数据不显示?
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 free -m 其中:m表示兆,也可以用g,注意都要小写 Men:表示物理内存统计 total:表示物理内存总数(total=used+free) use...
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发...
网页实现一个简单的音乐播放器(大佬别看。(⊙﹏⊙))
今天闲着无事,就想写点东西。然后听了下歌,就打算写个播放器。 于是乎用h5 audio的加上js简单的播放器完工了。 演示地点演示 html代码如下` music 这个年纪 七月的风 音乐 ` 然后就是css`*{ margin: 0; padding: 0; text-decoration: none; list-...
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。
数据库优化 - SQL优化
以实际SQL入手,带你一步一步走上SQL优化之路!
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 cpp 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7 p...
通俗易懂地给女朋友讲:线程池的内部原理
餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”
《奇巧淫技》系列-python!!每天早上八点自动发送天气预报邮件到QQ邮箱
将代码部署服务器,每日早上定时获取到天气数据,并发送到邮箱。 也可以说是一个小型人工智障。 知识可以运用在不同地方,不一定非是天气预报。
经典算法(5)杨辉三角
杨辉三角 是经典算法,这篇博客对它的算法思想进行了讲解,并有完整的代码实现。
英特尔不为人知的 B 面
从 PC 时代至今,众人只知在 CPU、GPU、XPU、制程、工艺等战场中,英特尔在与同行硬件芯片制造商们的竞争中杀出重围,且在不断的成长进化中,成为全球知名的半导体公司。殊不知,在「刚硬」的背后,英特尔「柔性」的软件早已经做到了全方位的支持与支撑,并持续发挥独特的生态价值,推动产业合作共赢。 而对于这一不知人知的 B 面,很多人将其称之为英特尔隐形的翅膀,虽低调,但是影响力却不容小觑。 那么,在...
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹...
面试官:你连RESTful都不知道我怎么敢要你?
干货,2019 RESTful最贱实践
刷了几千道算法题,这些我私藏的刷题网站都在这里了!
遥想当年,机缘巧合入了 ACM 的坑,周边巨擘林立,从此过上了"天天被虐似死狗"的生活… 然而我是谁,我可是死狗中的战斗鸡,智力不够那刷题来凑,开始了夜以继日哼哧哼哧刷题的日子,从此"读题与提交齐飞, AC 与 WA 一色 ",我惊喜的发现被题虐既刺激又有快感,那一刻我泪流满面。这么好的事儿作为一个正直的人绝不能自己独享,经过激烈的颅内斗争,我决定把我私藏的十几个 T 的,阿不,十几个刷题网...
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看...
白话阿里巴巴Java开发手册高级篇
不久前,阿里巴巴发布了《阿里巴巴Java开发手册》,总结了阿里巴巴内部实际项目开发过程中开发人员应该遵守的研发流程规范,这些流程规范在一定程度上能够保证最终的项目交付质量,通过在时间中总结模式,并推广给广大开发人员,来避免研发人员在实践中容易犯的错误,确保最终在大规模协作的项目中达成既定目标。 无独有偶,笔者去年在公司里负责升级和制定研发流程、设计模板、设计标准、代码标准等规范,并在实际工作中进行...
SQL-小白最佳入门sql查询一
不要偷偷的查询我的个人资料,即使你再喜欢我,也不要这样,真的不好;
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // doshom...
Nginx 原理和架构
Nginx 是一个免费的,开源的,高性能的 HTTP 服务器和反向代理,以及 IMAP / POP3 代理服务器。Nginx 以其高性能,稳定性,丰富的功能,简单的配置和低资源消耗而闻名。 Nginx 的整体架构 Nginx 里有一个 master 进程和多个 worker 进程。master 进程并不处理网络请求,主要负责调度工作进程:加载配置、启动工作进程及非停升级。worker 进程负责处...
【图解经典算法题】如何用一行代码解决约瑟夫环问题
约瑟夫环问题算是很经典的题了,估计大家都听说过,然后我就在一次笔试中遇到了,下面我就用 3 种方法来详细讲解一下这道题,最后一种方法学了之后保证让你可以让你装逼。 问题描述:编号为 1-N 的 N 个士兵围坐在一起形成一个圆圈,从编号为 1 的士兵开始依次报数(1,2,3…这样依次报),数到 m 的 士兵会被杀死出列,之后的士兵再从 1 开始报数。直到最后剩下一士兵,求这个士兵的编号。 1、方...
吐血推荐珍藏的Visual Studio Code插件
作为一名Java工程师,由于工作需要,最近一个月一直在写NodeJS,这种经历可以说是一部辛酸史了。好在有神器Visual Studio Code陪伴,让我的这段经历没有更加困难。眼看这段经历要告一段落了,今天就来给大家分享一下我常用的一些VSC的插件。 VSC的插件安装方法很简单,只需要点击左侧最下方的插件栏选项,然后就可以搜索你想要的插件了。 下面我们进入正题 Material Theme ...
如何防止抄袭PCB电路板
目录 1、抄板是什么 2、抄板是否属于侵权 3、如何防止抄板 1、抄板是什么 抄板也叫克隆或仿制,是对设计出来的PCB板进行反向技术研究;目前全新的定义:从狭义上来说,抄板仅指对电子产品电路板PCB文件的提取还原和利用文件进行电路板克隆的过程;从广义上来说,抄板不仅包括对电路板文件提取、电路板克隆、电路板仿制等技术过程,而且包括对电路板文件进行修改(即改板)、对电子产品外形模具进行三维...
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,...
程序员:我终于知道post和get的区别
是一个老生常谈的话题,然而随着不断的学习,对于以前的认识有很多误区,所以还是需要不断地总结的,学而时习之,不亦说乎
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU...
加快推动区块链技术和产业创新发展,2019可信区块链峰会在京召开
11月8日,由中国信息通信研究院、中国通信标准化协会、中国互联网协会、可信区块链推进计划联合主办,科技行者协办的2019可信区块链峰会将在北京悠唐皇冠假日酒店开幕。   区块链技术被认为是继蒸汽机、电力、互联网之后,下一代颠覆性的核心技术。如果说蒸汽机释放了人类的生产力,电力解决了人类基本的生活需求,互联网彻底改变了信息传递的方式,区块链作为构造信任的技术有重要的价值。   1...
Python 植物大战僵尸代码实现(2):植物卡片选择和种植
这篇文章要介绍的是: - 上方植物卡片栏的实现。 - 点击植物卡片,鼠标切换为植物图片。 - 鼠标移动时,判断当前在哪个方格中,并显示半透明的植物作为提示。
相关热词 c#中dns类 c#合并的excel c# implicit c#怎么保留3个小数点 c# 串口通信、 网络调试助手c# c# 泛型比较大小 c#解压分卷问题 c#启动居中 c# 逻辑或运算符
立即提问