ajaxfileupload批量上傳文件+圖片尺寸限制

1.首先展示ajaxfileupload代碼，在這里修改為批量上傳

//ajaxfileupload不展示全部代碼，這是修改前與修改后代碼對比，目的是上傳多個文件

 createUploadForm: function (id, fileElementId, data) {
        //create form    
        var formId = 'jUploadForm' + id;
        var fileId = 'jUploadFile' + id;
        var form = jQuery('<form  action="" method="POST" name="' + formId + '" id="' + formId + '" enctype="multipart/form-data"></form>');
        if (data) {
            for (var i in data) {
                jQuery('<input type="hidden" name="' + i + '" value="' + data[i] + '" />').appendTo(form);
            }
        }
        //修改前代碼-------   
        //        var oldElement = jQuery('#' + fileElementId);
        //        var newElement = jQuery(oldElement).clone();
        //        jQuery(oldElement).attr('id', fileId);
        //        jQuery(oldElement).before(newElement);
        //        jQuery(oldElement).appendTo(form);
        //修改前代碼-------  

        //修改后代碼-------  
        for (var i in fileElementId) {
            var oldElement = jQuery('#' + fileElementId[i]);
            var newElement = jQuery(oldElement).clone();
            jQuery(oldElement).attr('id', fileId);
            jQuery(oldElement).before(newElement);
            jQuery(oldElement).appendTo(form);
        }
        //修改后代碼-------

        //set attributes
        jQuery(form).css('position', 'absolute');
        jQuery(form).css('top', '-1200px');
        jQuery(form).css('left', '-1200px');
        jQuery(form).appendTo('body');
        return form;
    },

2.展示js代碼 (里面layer為第三方插件忽略改為alert即可)

//檢查尺寸是否符合規范
function uploadImgCheckedPx(f, w, h, callback) {
    var reader = new FileReader();
    reader.onload = function (e) {
        //判斷圖片尺寸
        var img = null;
        img = document.createElement("img");
        document.body.insertAdjacentElement("beforeend", img);
        img.style.visibility = "hidden";
        img.src = this.result;
        var imgwidth = img.naturalWidth;
        var imgheight = img.naturalHeight;
        if (imgwidth != w || imgheight != h) {
            document.body.removeChild(img);
            //隱藏 
            layer.closeAll('loading');
            layer.alert("圖片尺寸必須是" + w + "x" + h + "!");
            callback && callback(false);
        } else {
            callback && callback(true);
        }
    }
    var files = f.files;
    if (files.length > 0)
        reader.readAsDataURL(files[0]);
}
//上傳圖片到百度雲（這里是向后台提交文件，然后后台進行上傳百度雲等雲服務器）
function uploadImgBack(inputArray, callback) {
    $.ajaxFileUpload
        ({
            url: "/Handler/ImgFileUpload.ashx", //用於文件上傳的服務器端請求地址
            async: true,
            secureuri: false, //一般設置為false
            //fileElementId: 'uploadfile1', //修改前代碼
            fileElementId: inputArray, //已數組方式存儲 input Id
            dataType: 'json', //返回值類型 一般設置為json
            //不能用success，否則不執行  
            complete: function (data) {
                try { data = jQuery.parseJSON(data.responseXML.documentElement.innerText); } catch (e) { data = jQuery.parseJSON(data.responseXML.documentElement.textContent); }
                if (data.state == "0") {
                    callback && callback(data.msg);
                } else {
                    //隱藏 
                    layer.closeAll('loading');
                    layer.alert(data.msg);
                    callback && callback(-1);
                }
            }
        });
}
//上傳圖片
/*
    inputArray 上傳inputId 數組
    callback 成功后回調函數
    w, px寬
    h, px高
*/
function uploadImg(inputArray, callback, w, h) {
    if (w && h) {
        var resStateArray = [];
        for (var i = 0; i < inputArray.length; i++) {
            var f = document.getElementById(inputArray[i]);
            uploadImgCheckedPx(f, w, h, function (state) {
                resStateArray.push(state);
            });
        }
        var tempInterval = setInterval(function () {
            console.log(resStateArray);
            if (resStateArray.length == inputArray.length) {
                clearInterval(tempInterval);
                if (resStateArray.indexOf(false) != -1) {
                    callback && callback(-1);
                } else {
                    uploadImgBack(inputArray, function (res) {
                        callback && callback(res);
                    });
                }
            }
        }, 500);
    } else {
        uploadImgBack(inputArray, function (res) {
            callback && callback(res);
        });
    }
}

3.展示html 調用js封裝代碼進行提交

<input type="file" name="name" id="uploadBigImg1" hidden onchange="preImg(this.id,'BigImg1');" readonly datatype="*" nullmsg="請選擇圖片！" />
<input type="file" name="name" id="uploadBigImg2" hidden onchange="preImg(this.id,'BigImg2');" readonly />
  <input type="file" name="name" id="uploadBigImg3" hidden onchange="preImg(this.id,'BigImg3');" readonly />

  var imgBigArrar = [];
 imgBigArrar.push("uploadBigImg1");
 imgBigArrar.push("uploadBigImg2");
  imgBigArrar.push("uploadBigImg3");
//調用Js
  uploadImg(imgBigArrar, function (res) {
                if (res != -1) {
                   //res 是上傳完成的雲資源
                   //
                }
            }, 1242, 496);
//1242 寬，496高  不加即為不限制尺寸大小    

//后台C# 代碼接收請求
public class ImgFileUpload : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            string path = "";
            string msg = "";
            if (path.LastIndexOf('/') != path.Length - 1) path += "/";

            var files = HttpContext.Current.Request.Files;
//do something ....
}
}