HTML5 mobile phone bulk upload picture steering problem

After the previous improvements had thought that there is no problem, but after our powerful test test, we found that the photo album in the upload will also occur when the problem. Since the front has solved the problem of the photo-steering, then the photo album in the upload is easy to solve. Change the type of the picture you need to determine, you can modify the following:

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

All JPG types of pictures have to rotate, after testing, album in the single upload can be, but the bulk upload function is ineffective. With the fiddler grab bag found that the upload of the Base64 string is contained more than one picture, so that the background code in parsing the string error. Read again the code can find that the code also has more than one asynchronous operation, such as using FileReader, Ajax upload pictures, picture information Acquisition (Exif.getdata), picture Loading (img.onload) and so on. The use of asynchronous can improve the efficiency of the code, but also often bring about the problem of resource competition, I decided to read a picture after reading the next picture, for the loop is obviously not, I used the recursion to ensure this, modify the code as follows:

(function () {
var imgoperate = {
Operateurl: "Database operation Address",
Uploadurl: "Upload image Address",
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 ("Back to the first step to improve the corresponding information");
Return
}
var imglength = $ ("#entrust DD"). Length-1;

if (Imglength >= 20)
{
This. ShowMsg ("You have more than 20 pictures, can not be uploaded");
Return
}
if (Imglength + where.files.length > 20)
{
This. ShowMsg ("You have selected more than 20 pictures, can not upload, please choose again");
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 ("Upload failed, photos over 10M");
else if (Imgsrc.indexof ("http")!=-1) {
var dd = document.createelement ("dd");
if ($ ("#entrust dd"). length = = 1) {
dd.innerhtml = "<div class=\" cver\ "> cover page </div><a class=\" close\ "></a> ";
} else {
dd.innerhtml = "<a class=\" close\ "></a>}
document.getElementById ("Entrust"). AppendChild (DD);
_this.dlwidth + = _this.ddwidth + 17;
$ (' #entrust '). CSS ("width", _this.dlwidth);
_this. Inserimage (IMGSRC, DD);
this.successcount++;
_this. ShowMsg ("Uploading the first" + (i+1) + "picture");
}
if (i = = where.files.length) {
if (This.successcount > 0) {
_this. ShowMsg ("Successful upload" + Successcount + ", can continue to upload new photos");
}
}
})
},
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 ' >

$ (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);
},
Base64 of @param {string} img Picture
Orientation information obtained @param {int} dir EXIF
@param {Function} Next callback method, returns the Base64 after the correction direction
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;
The following changes the size of the picture
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 ');
Determine the direction of the picture, reset the canvas size, determine the rotation angle, the iphone default is the home button on the right side of the horizontal screen shooting way
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);
Back to corrected picture
Next (Canvas.todataurl ("Image/jpeg",. 8));
}
}

}

Imgoperate.onload ();
Window.imgoperate = imgoperate;

) (); After solving the above problems and found some models of mobile phone pictures unexpectedly can not upload, I took their pictures to the computer test, found that the reason is that their picture is too large, has exceeded the default 4M. To this end, I modified the configuration, resolved the related issues, configuration changes are as follows:

<location path= "Picture proxy server Address" >
<system.web>
</system.web>
</location>

With location, you can simply add the maximum number of parameters to the page you upload, without affecting other normal pages.