.net+ajax+jquery.form实现简单的图片批量上传 含Demo源码下载

实习的公司一直不给web相关项目做，手痒痒，生怕把web方面的知识给遗漏了，有空没空就翻翻之前做的一些项目，把一些功能拿出来记录一下，以便以后遇到方便查询。

在一些项目中会经常遇到 需要批量上传图片的需求，光光图片给传了还不够，还要给图片描述啊 啥的，不过在.NET中如果用控件来实现这个功能你就惨了，动态添加控件，动态取值烦都烦死，还好本人不喜欢.Net的控件，甚至是讨厌了（这里没有说控件差的意思，只是个人的习惯而已）

本文所要讲的就是在.net中结合jquery和他的form插件来完成图片的批量上传。

各位应该都知道用jquery来动态添加dom元素异常的简单，此功能也主要是通过jquery来动态添加表单来实现批量的功能

那么，我们是在form标签中动态添加Input元素来实现呢 还是 直接动态添加form标签来做这个批量？？

首先来看动态添加input元素，网上很多批量的案例也都是用这种方式来做的

View Code

function TajaxFileUpload() {
if (num >= i) {
$("form[name='uploadPic" + i + "']").ajaxSubmit({
success: function (html, status) {
if (status == "success") {
html = html.replace(/<\/?[^>]*>/g, '');
//html = html.replace(/[ | ]*\n/g, '\n');
var json = eval('(' + html + ')');
if (json.state == "success") {//上传成功
successNum++;
$(".picForm").eq(i - 1).append("<span class='success'>" + json.msg + "</span>");
} else {//上传失败
failNum++;
$(".picForm").eq(i - 1).append("<span class='error'>" + json.msg + "</span>");
}
i++;
setTimeout(function () { TajaxFileUpload() }, 500); //递归函数  延迟500秒
} else {
art.dialog.alert("请求数据失败");
} //stauts success
} //submit success
}); //ajaxSubmit
} else {

if (confirm('系统对' + num + '个用户进行处理，\r\n其中成功上传' + successNum + '张照片，\r\n有' + failNum + '张上传失败，是否继续上传')) {
location.reload();
}
}
} //t ajax

来看下效果图，



这个是初始化出来的页面，下面是上传好了的示例



关于客户端的html代码和服务器的上传代码就不贴出来啦，有兴趣的同学可以

猛击我去下载源码