动态展示图片

1.html

     <div class="layui-form-item">
                    <label class="layui-form-label">商品图片：</label>
                    <div class="layui-input-block banner_file">
                        <!-- 商品修改  imgFlag 图片修改标识 0未修改  1重新传问价留 2 删除个别链接
                        DBImgUrl  删除几张图片后   直接存入数据库的 链接  -->
                        <input type="hidden" name="imgFlag" title="商品图片修改状态" value="0" class="imgFlag" id="imgFlag">
                        <input type="text" readonly="true" autocomplete="off" name="DBImgUrl" id="productImg"
                               class="layui-input productImg_url input_disabled" title="商品图片url">
                        <div class="banner_inline">
                            <label class="button_tb" for="female">选择图片</label>
                            <input class="layui-upload-file productImg" name="file" type="file" accept="image/*" id="female"
                                   multiple="multiple">
                        </div>
                        <div class="file_img_list" id="file_img_list">
                            <!-- <div class="file_img">
                                <p class="file_exit">&times;</p>
                                <img src="" alt="">
                            </div> -->

                        </div>
                        <p class="file_img_tishi">缩略图 尺寸建议宽度640*350，并保持图片尺寸大小保持一致。</p>
                    </div>
                </div>

2.js

 pro_msg.productImgList=pro_msg.productImg.split(',')
                                var pro_img_length = pro_msg.productImgList.length; //图片张数
                                //商品图片展示
                                if(pro_img_length>0) {
                                    var pro_img_html = "";
                                    for(var p = 0; p <pro_img_length; p++) {
                                        pro_img_html += '<div class="file_img" img_data="1" img_url="'+pro_msg.productImgList[p]+'"><p class="file_exit">&times;</p><img src="'+pro_msg.productImgList[p]+'" alt=""> </div>';
                                    };
                                    body.find("#form_data #file_img_list").html(pro_img_html);
                                };