2 wjh penglei wjh_penglei 于 2016.01.16 15:11 提问

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

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

2个回答

save4me
save4me   Ds   Rxr 2016.01.16 23:19

代码和样式贴出来看一下

wjh_penglei
wjh_penglei 代码贴上 了 ,能看看是什么问题吗
2 年多之前 回复
wjh_penglei
wjh_penglei   2016.01.18 14:50

静态页面代码:

    <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
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
bootstrap多图片上传加远程提取图片
bootstrap modal弹出层加PHP多图片上传演示和下载,PHP读取远程图片并下载到本地。 演示请看http://www.sucaihuo.com/php/1268.html
bootstrap-file-input使用心得
bootstrap-file-input使用心得,实例参考,fileinput
【bootstrap】 file-input,无法多选。(总是替换前一张图片)
<input id="myFile" type="file" name="myFile" multiple class="fileloading">我找了半天fileinput.js里的参数,发现都不对,原来是 input 少了个 multiple
Bootstrap-fileinput插件使用教程 支持多文件上传
Bootstrap file-input插件使用教程 得到返回值以及多文件上传
bootstrap 上传图片插件 file-input 的简单使用
最近在写自己的个人网站 ,前端使用的bootstrap框架 ,做到上传图片功能的时候网上找到一个基于bootstrap的图片上传框架 file-input  插件, 这个插件做的非常符合我的审美观,所以简单记录一下这个插件的使用方法 首先根据自己的项目路径引入插件css和js文件 注意locale语言文件在fileinput.min.js文件之后引入 然后是html代
bootstrap-fileinput-master上传插件(中文版)
bootstrap上传插件,可预览,可批量
基于bootstrap图片上传_jquery支持多张上传
基于bootstrap图片上传_jquery支持多张上传 基于bootstrap图片上传_jquery支持多张上传
bootstrap中inputfile 中文设置
1.引入bootstrap 中所需的静态文件和fileinput所需的依赖样式引用去掉input file 中的class=&quot;file&quot;,否则会不成功当去掉class=&quot;file&quot;之后会出现input 的样式没了,因此需要在&amp;lt;script&amp;gt;&amp;lt;/script&amp;gt;中初始化input标签如下所示:initFileInput(); function initFileInp...
Bootstrap fileinput 删除回调事件处理
bootstrap fileinput 控件删除事件的处理
bootstrap File Input 多文件上传插件使用记录(一)配置及批量同步上传
bootstrap file input 多文件上传工具,功能十分强大,也很完善,我也是在接触了这个插件后自己研究使用的,当然也踩了很多的坑,主要是官方API是英文的,可能没兴趣一行一行的读,只能是用到了什么需求然后再去看对应的API说明。所以本文主要是我在使用过程中的解决思路,对此插件的使用也并不完善,请各位谅解。 官方API请撮这里 需求:先来说说我使用此插件的需求及流程 1.在