HTML5前端多图压缩、预览、上传

<input type="file" capture="camera" accept="image/*" multiple onchange="drawOnCanvas(this,'#div1');" />
<div id="div1">
</div>
<input id="Button1" type="button" value="button" />

function drawOnCanvas(obj, divid) {
    //清除div当前内容
    $(divid).empty();

    var strHtml = "";
    for (var intI = 0; intI < obj.files.length; intI++) {
        //每循环一次都要重新new一个FileReader实例 
        var reader = new FileReader();

        reader.onload = function (e) {
            var dataURL = e.target.result,
        canvas = document.createElement('canvas'),
        context = canvas.getContext('2d'),
        img = new Image();
            img.onload = function () {
                var imageWidth;
                var imageHeight;
                if (this.width > 1000) {
                    imageWidth = 1000;
                    imageHeight = Math.round(1000 * this.height / this.width);
                }
                else if (this.height > 1500) {
                    imageHeight = 1500;
                    imageWidth = Math.round(1500 * this.width / this.height);
                }
                else {
                    imageWidth = this.width;
                    imageHeight = this.height;
                }
                //canvas对图片进行缩放
                canvas.width = imageWidth;
                canvas.height = imageHeight;
                //清除画布
                context.clearRect(0, 0, imageWidth, imageHeight);
                //图片压缩
                context.drawImage(this, 0, 0, imageWidth, imageHeight);
                //值不要设的太小，要不然图片质量会太低，也不要设1，压缩后的图片大小比0.9大很多
                var base64 = canvas.toDataURL('image/jpeg', 0.9);

                strHtml = "<img src='" + base64 + "' style='padding:2px;' class='img' />";
                $(divid).append(strHtml);
            };
            img.src = dataURL;
        };
        reader.readAsDataURL(obj.files[intI]);
    }
}

然后用ajax传到后台

$(function () {
            $('#Button1').click(function () {
                if ($(".img").length > 10) {
                    alert("一次只能上传10张图片");
                }
                else {
                    var base64 = "";
                    $(".img").each(function () {
                        base64 += $(this).attr("src").substr(23) + ",";
                    });
                    $.ajax({
                        url: "ceshi.ashx",
                        type: 'post',
                        data: { base64: base64 },
                        success: function (data) {
                            alert("成功");
                        },
                        error: function (data) {
                            alert("失败");
                        }
                    })
                }
            });
        });

后台保存 

string[] base64 = context.Request["base64"].Split(',');
            byte[] btsdata;
            string uploadDir;
            for (int i = 0; i < base64.Length - 1; i++)//最后一个字符串为空，需减去
            {
                btsdata = Convert.FromBase64String(base64[i]);

                uploadDir = context.Server.MapPath("/images/ceshi/" + Guid.NewGuid().ToString("D") + ".jpg");

                using (System.Drawing.Image img = System.Drawing.Image.FromStream(new System.IO.MemoryStream(btsdata)))
                {
                    img.Save(uploadDir, System.Drawing.Imaging.ImageFormat.Jpeg);
                }
            }