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

现在的位置: 首页 > 综合 > 正文

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

2012年11月08日 ⁄ 综合 ⁄ 共 1947字 ⁄ 字号小中大 ⁄ 评论关闭

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

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

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

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

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

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

View Code

<form>
        <input type="file" name="pic" />
    </form>
    <script type="text/javascript">
        var html = "<input type='file' name='pic" + $("input[type='file']").length + "' />";
        $("form").append(html);
    </script>

这样显而易见，不会又多余的html，并且所以表单是一次性请求服务器的，全部结束后返回，但是如果在上传过程中一旦有一张图片出问题，之后的图片都将无法按成功程序上传（当然通过异常捕捉也可以舍去失败的那张图片）

接下来看下第二种的示例代码

View Code

<fieldset>
    <form>
        <input type="file" name="pic" />
    </form>
    </fieldset>
    <script type="text/javascript">
        var html = "<form>" +
    "<input type='file' name='pic" + $("input[type='file']").length + "' />" +
    "</form>";
        $("fieldset").append(html);
    </script>

这样的方式是每张图片都是一个form表单，到时候提交的时候是逐个form去请求服务器上传图片，这样明显请求就变多了，但是我们可以在客户端捕捉到当前上传的个数，上传的状态，并且在上传图片时还要添加附加信息的情况下更加容易实现这个需求

为了有更好的体验，我选择了第二种。逐个上传，逐个判断

本文主要是通过递归的方式来进行请求，全部请求完成之后出给请求的统计提示

核心请求函数：

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