大朋展翅 html5上传图片(三)一解决部分手机拍相册批量上传图片转向问题

        在经过前面的改进之后本来以为已经没有问题了，但经过我们神通广大的测试的测试，发现相册中的图片在上传时也会发生转向问题。既然前面都解决了拍照转向的问题，那么相册中图片的上传也容易解决。修改一下需要旋转图片的类型判定即可，修改如下：

  var type = file.name.match(/.w+$/)[0].toLowerCase();
            if (type == ".jpg" || type == ".jpeg")

        凡是jpg类型的图片都要旋转，经过测试，相册中的单张上传是可以的，但批量上传的功能竟然失效了。用fiddler抓包发现，上传的base64字符串是包含多张图片，以至于后台代码在解析字符串时出错。再次阅读代码可以发现，代码中包还了多个异步操作，如使用FileReader、ajax上传图片、图片信息获取（ EXIF.getData）、图片加载（img.onload）等。使用异步可以提高代码的执行效率，但是也往往会带来资源竞争的问题，我决定在一张图片读完之后再读取下一张图片，for循环显然是不可行了，我使用了递归来保证了这一点，修改代码如下：

(function () {
    var imgOperate = {
        operateUrl: "数据库操作地址",
        uploadUrl: "上传图片地址",
        DelPicId: '',
        ddWidth: 0,
        dlWidth: 0,
        successCount:0,
        onload: function () {
            this.initImage();
        },
        initImage: function () {
            var et = $('#entrust dd').length;
            this.ddWidth = $('#entrust dd').width() + 17;
            this.dlWidth = parseInt(et * this.ddWidth + 160);
            $('#entrust').css("width", this.dlWidth);
            this.BindEvent();
        },
        BindEvent: function () {
            var _this = this;     
            $("#pic0").on("change", function () {
                _this.uploadFiles(this);
              
            });
    
        },
        InserImage:function(urls,dd)
        {
            $.post(this.operateUrl, { houseid: houseid, operateType: 1, picStr: urls }, function (data) {
                data = eval("(" + data + ")");
                if (data && data.picIds)
                {
                    dd.getElementsByTagName("img")[0].setAttribute("housepicid", data.picIds);
                }
            });
        },
        uploadFiles: function (where) {
            if (!houseid) { 
                this.ShowMsg("请回到第一步完善相应的信息");
                return;
            }
            var imgLength = $("#entrust dd").length - 1;
            
            if (imgLength >= 20)
            {
                this.ShowMsg("你的图片超过了20张，不能再上传");
                return;
            }
            if (imgLength + where.files.length > 20)
            {
                this.ShowMsg("你选择的图片超过了20张，无法上传，请重新选择");
                return;
            }
         

            var _this = this;
            var radtime = new Date();
            var sid = radtime.getTime();
            this.successCount = 0;
            this.UploadNext(0, sid, where);
        },
        UploadNext: function (i, sid, where)
        {
            if (i >= where.files.length) return;
          var file = where.files[i];
          var type = file.name.match(/.w+$/)[0].toLowerCase();
            if (type == ".jpg" || type == ".jpeg") {
                this.UploadJpg(i, sid, where);
            } else {
                var formData = new FormData();
                formData.append("icoimage", file);
                this.UploadImg(where, formData, sid, i);
                i++;
                this.UploadNext(i++, sid, where);
            }

        },
        UploadJpg:function(i,sid,where)
        {
            var _this = this;
            var file = where.files[i];
            EXIF.getData(file, function () {
                var formData = new FormData();
               
                EXIF.getAllTags(this);
                var orientation = EXIF.getTag(this, 'Orientation');

                if (orientation && orientation >= 2 && orientation<=8) {
                    var reader = new FileReader();
                    reader.readAsDataURL(file);
                    reader.onload = function (e) {
                        _this.getImgData(e, this.result, orientation, function (data) {
                            formData.append("icoimage", data);
                            _this.UploadImg(where, formData, sid, i);
                            i++;
                                _this.UploadNext(i, sid, where);
                           
                        });
                    }

                } else {
                  
                    formData.append("icoimage", file);
                    _this.UploadImg(where, formData, sid, i);
                    i++;
                        _this.UploadNext(i, sid, where);
               
                }
            });
        },
        UploadImg: function (where, formData, sid, i) {
            var _this = this;
            $.ajax({
                url: this.uploadUrl + '?channel=duanzu.houseinfo&sid=' + sid,
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).success(function (res) {
                var imgsrc = res; 
                if (imgsrc == "-1" || imgsrc == "302" || imgsrc == -1 || imgsrc == 302) {
                    _this.ShowMsg("上传失败，照片超过10M");
                } else if (imgsrc.indexOf("http") != -1) {
                    var dd = document.createElement("dd");
                    if ($("#entrust dd").length == 1) {
                        dd.innerHTML = "<div class="cver">封面图</div><a class="close"></a><img src="" + imgsrc + "" housepicid="">";
                    } else {
                        dd.innerHTML = "<a class="close"></a><img src="" + imgsrc + "" housepicid="">";
                    }
                    document.getElementById("entrust").appendChild(dd);
                    _this.dlWidth += _this.ddWidth + 17;
                    $('#entrust').css("width", _this.dlWidth);
                    _this.InserImage(imgsrc, dd);
                    this.successCount++;
                    _this.ShowMsg("正在上传第" + (i+1)+ "张图片");
                }
                if (i == where.files.length) {
                    if (this.successCount > 0) {
                        _this.ShowMsg("成功上传" + successCount + "，可继续上传新照片");
                    }
                } 
            })
        },
        ShowMsg: function (text, mymethod) {
            var radtime = new Date();
            var sid = radtime.getTime();
            var msg_div = "<div class='zuopenbox' id='div_msg" + sid + "'><div class='opencon_01'><div class='openList'><h3 class='f15' style='margin-bottom: 0; color: #FFFFFF'>" + text + "</h3></div></div></div>";

            $(msg_div).appendTo("body");
            var _this = this;
            setTimeout(function () {
                var d = 0.5;
                var m = document.getElementById("div_msg"+sid);
                m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in';
                m.style.opacity = '0';
                setTimeout(_this.RemoveNode(m), 500);
            }, 500);
        },
        RemoveNode: function (m) {
            m.parentNode.removeChild(m);
        },
        // @param {string} img 图片的base64
        // @param {int} dir exif获取的方向信息
        // @param {function} next 回调方法，返回校正方向后的base64
        getImgData: function (e,img, dir, next) {
            var _this = this;
            var image = new Image();
            image.src = e.target.result;
    image.onload=function(){
        var degree=0,drawWidth,drawHeight,width,height;
        drawWidth=this.naturalWidth;
        drawHeight=this.naturalHeight;
        //以下改变一下图片大小
        var maxSide = Math.max(drawWidth, drawHeight);
        if (maxSide > 1024) {
            var minSide = Math.min(drawWidth, drawHeight);
            minSide = minSide / maxSide * 1024;
            maxSide = 1024;
            if (drawWidth > drawHeight) {
                drawWidth = maxSide;
                drawHeight = minSide;
            } else {
                drawWidth = minSide;
                drawHeight = maxSide;
            }
        }
        var canvas=document.createElement('canvas');
        canvas.width=width=drawWidth;
        canvas.height=height=drawHeight; 
        var context = canvas.getContext('2d');
        //判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
        switch(dir){
            case 2:
                context.translate(width, 0);
                context.scale(-1, 1);
                break;
            case 3:
                context.translate(width, height);
                context.rotate(Math.PI);
                break;
            case 4:
                context.translate(0, height);
                context.scale(1, -1);
                break;
            case 5:
                context.rotate(0.5 * Math.PI);
                context.scale(1, -1);
                break;
            case 6:
                context.rotate(0.5 * Math.PI);
                context.translate(0, -height);
                break;
            case 7:
                context.rotate(0.5 * Math.PI);
                context.translate(width, -height);
                context.scale(-1, 1);
                break;
            case 8:
                context.rotate(-0.5 * Math.PI);
                context.translate(-width, 0);
                break;
          
        }
        context.beginPath();
        context.drawImage(this,0,0,drawWidth,drawHeight);
        //返回校正图片
        next(canvas.toDataURL("image/jpeg",.8));
    }
}

    }

    imgOperate.onload();
    window.imgOperate = imgOperate;
   


})();

       在解决了上面问题后又发现了一些型号的手机图片竟然无法上传，我将它们的图片转到电脑上来测试，发现原因是它们的图片太大，已经超过了默认的4M。为此，我修改了一下配置，解决了相关的问题，配置修改如下：

<location path="图片代理服务器地址">
    <system.web>
      <httpRuntime maxRequestLength="10240"/>
    </system.web>
  </location>

      使用location可以仅让上传图片的页面增加参数最大可传的值，而不会影响其它正常的页面。