使用百度的webuploader实现多图片上传

1.引入样式 （需要下载webuploader，放到本地static目录）

<!--使用百度提供的webuploader上传多图片-->
<!-- 上传图片的js css -->
<link rel="stylesheet" type="text/css" href="/static/diyUpload/css/webuploader.css">
<link rel="stylesheet" type="text/css" href="/static/diyUpload/css/diyUpload.css">
<script type="text/javascript" src="/static/diyUpload/js/webuploader.html5only.min.js"></script>
<script type="text/javascript" src="/static/diyUpload/js/diyUpload.js"></script>

2.绑定属性

<div role="tabpanel" class="tab-pane" id="photo">

    <div id="photoUploader"></div>
    <div id="photoList"></div>
</div>

3.使用js初始化

//使用百度提供的webuploader实现多图片上传
$(function() {
    $('#photoUploader').diyUpload({
        url:'/admin/goods/imageUpload',
        success:function(response) {
            var photoStr = '<input type="hidden" name="goods_image_list" value='+response.link+' />';
            $("#photoList").append(photoStr)
        },
        error:function(err) {
            console.info(err);
        }
    });
})

4.还需要加上css解决上传不了bug

/* 解决webuploader按钮失效的方法 */
#photoUploader div:nth-child(2){width:100%!important;height:100%!important;}

#photoUploader{
    margin: 20px auto;
    width: 200px;

}