问题描述

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

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

解决方案

代码和样式贴出来看一下

解决方案二：

静态页面代码：

    <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 有方法么