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

        實習的公司一直不給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

來看下，  

這個是初始化出來的頁面，下面是上傳好了的樣本

 

關於用戶端的html代碼和伺服器的上傳代碼就不貼出來啦，有興趣的同學可以

  猛擊我去下載源碼