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 ....
}
}