wjh_penglei
honeyBack
采纳率0%
2016-01-16 07:11 阅读 4.1k

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

10

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

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • save4me save4me 2016-01-16 15:19

    代码和样式贴出来看一下

    点赞 评论 复制链接分享
  • wjh_penglei honeyBack 2016-01-18 06: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 有方法么

    点赞 评论 复制链接分享

相关推荐