.net+ajax+jquery.form實現簡單的圖片批量上傳 含Demo源碼下載

        實習的公司一直不給web相關項目做，手癢癢，生怕把web方面的知識給遺漏了，有空沒空就翻翻之前做的一些項目，把一些功能拿出來記錄一下，以便以后遇到方便查詢。

      在一些項目中會經常遇到  需要批量上傳圖片的需求，光光圖片給傳了還不夠，還要給圖片描述啊  啥的，不過在.NET中如果用控件來實現這個功能你就慘了，動態添加控件，動態取值煩都煩死，還好本人不喜歡.Net的控件，甚至是討厭了（這里沒有說控件差的意思，只是個人的習慣而已）

       本文所要講的就是在.net中結合jquery和他的form插件來完成圖片的批量上傳。

       各位應該都知道用jquery來動態添加dom元素異常的簡單，此功能也主要是通過jquery來動態添加表單來實現批量的功能

        那么，我們是在form標簽中動態添加Input元素來實現呢  還是 直接動態添加form標簽來做這個批量？？

      首先來看動態添加input元素，網上很多批量的案例也都是用這種方式來做的

      

<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，並且所以表單是一次性請求服務器的，全部結束后返回，但是如果在上傳過程中一旦有一張圖片出問題，之后的圖片都將無法按成功程序上傳（當然通過異常捕捉也可以舍去失敗的那張圖片）

接下來看下第二種的示例代碼

<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去請求服務器上傳圖片，這樣明顯請求就變多了，但是我們可以在客戶端捕捉到當前上傳的個數，上傳的狀態，並且在上傳圖片時還要添加附加信息的情況下更加容易實現這個需求

     為了有更好的體驗，我選擇了第二種。逐個上傳，逐個判斷

    本文主要是通過遞歸的方式來進行請求，全部請求完成之后出給請求的統計提示

     核心請求函數：

    

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代碼和服務器的上傳代碼就不貼出來啦，有興趣的同學可以

  猛擊我去下載源碼