关于使用webuploader批量上传图片

上传图片

加载js文件

<!--图片上传-->
    <script src="../../../lib/webuploader/webuploader.min.js" type="text/javascript"></script>
    <script src="../../../js/uploader.js" type="text/javascript"></script>

webuploader.min.js
uploader.js
Uploader.swf

初始化

<script type="text/javascript">
        $(function () {
            $(".upload-album").InitUploader({
                btntext: "批量上传",
                multiple: true,
                water: true,
                thumbnail: true,
                filesize: "102400",
                sendurl: "upload_ajax.ashx",
                swf: "Uploader.swf" 
            });
        });
    </script>

放图片的div

<div class="layui-form-item">
    <label class="layui-form-label">
        图片上传</label>
    <div class="layui-input-block">
        <div class="upload-box upload-album">
        </div>
        <input name="hidFocusPhoto" type="hidden" id="Hidden1" class="focus-photo" />
        <div class="photo-list" id="photolist">
            <ul>
            </ul>
        </div>
    </div>
</div>

js代码

<script type="text/javascript">
layui.use('form', function () {
    var form = layui.form;
    //监听提交
    form.on('submit(component-form-demo1)', function (data) {
        ///图片集合
        var imglist = ""; //图片路径列表
        var testimg = $("#photolist input[name^='hid_photo_name']");
        for (var i = 0; i < testimg.length; i++) {
            imglist += testimg[i].value + ",";
        }
        $.ajax({
        	//传到后台的代码
        });
    });
});        
</script>

更新图片

放图片的容器

<div class="layui-form-item">
    <label class="layui-form-label">
        图片上传</label>
    <div class="layui-input-block">
        <div class="upload-box upload-album">
        </div>
        <input name="hidFocusPhoto" type="hidden" id="Hidden1" class="focus-photo" />
        <div class="photo-list" id="photolist">
            <ul>
                <asp:Repeater ID="rptAlbumList" runat="server">
                    <ItemTemplate>
                        <li>
                            <input type="hidden" name="hid_photo_name" value="<%#Eval("id")%>|<%#Eval("fileurl")%>|<%#Eval("remark")%>|<%#Eval("filename")%>" />
                            <input type="hidden" name="hid_photo_remark" value="<%#Eval("filename")%>" />
                            <div class="img-box" onclick="setFocusImg(this);">
                                <a class="example-image-link" href="<%#Eval("fileurl")%>" data-lightbox="example-set">
                                    <img class="example-image 0" src="<%#Eval("remark")%>" width="112" height="112" />
                                </a>
                            </div>
                            <a href="javascript:;" onclick="delImg(this);">删除</a> </li>
                    </ItemTemplate>
                </asp:Repeater>
            </ul>
        </div>
    </div>
</div>

cs代码（获取之前上传的图片）

IList<Models.ytj_file> list = new BLL.ytj_file().GetModelList(" fileid='" + Mod.logo + "'");
rptAlbumList.DataSource = list;
rptAlbumList.DataBind();

初始化、js代码同上传