上传图片
加载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代码同上传