Uploading the image itself is a basic small function, but to the mobile side is not so simple, I believe you find this article you must have a deep feeling.
The example in this article is: Click on the picture on the (mobile) page, then select the file and save. Using ASP.
Difficulty one: Background to get fileupload files
Solution: add enctype= "Multipart/form-data" data-ajax = "false" in the form
Difficulty two: iOS pictures uploaded after display as landscape pictures (iOS flat photos no this problem; Android does not have this problem)
solution: load exif.js, use the Orientation property to determine its rotation angle
The complete code is as follows:
1) page Header loading exif.js,:http://code.ciaoca.com/javascript/exif-js/
<runat= "Server"> <script src= "Exif.js" > </script></head>
2) Page HTML
<Body> <formID= "Form1"runat= "Server"enctype= "Multipart/form-data" data-ajax= "false"> <DivData-role= "page"ID= "Pageone"> <DivData-role= "Main"ID= "Mainbody"> <imgsrc= "Img/errimg.jpg"onerror= "this.src= '/img/errimg.jpg '"ID= "Imguserico"runat= "Server" />
<ASP:button ID= "Save" runat= "Server" OnClick= "Save_click" Text = "Save"/>
</Div> </Div> <%--here are the hidden--%> <Asp:fileuploadID= "Fileimg"runat= "Server"onchange= "Imguserico2preview (this);"Style= "Display:none" /> <Asp:hiddenfieldID= "Hidorientation"runat= "Server"Value= "1" /> </form></Body>
3) Click on the image of the event
$ ("#imgUserIco"). On ("clickfunction () { $ ("#fileImg "). Click ();});4) The event that the image path in the upload control changes
functionImguserico2preview (o) {if(O.files && O.files[0]) {varFile = O.files[0]; varOrientation =NULL;//Rotation angle: 1) 0 degrees, 3) 180 degrees, 6) clockwise 90 degrees, 8) counterclockwise 90 degrees varFileName =File.name; varFileType = Filename.substr (Filename.lastindexof ("."), Filename.length-filename.lastindexof (".")) . toLowerCase (); if(". Gif.png.jpeg.jpg.bmp". IndexOf (FileType) > 1) {//Save Rotation Angle exif.getdata (file, function () {//Alert (Exif.pretty (this)); Exif.getalltags (this);//Alert (Exif.gettag (this, ' Orientation ')); Orientation = Exif.gettag (this, ' Orientation ' )); $("#hidOrientation"). Val (Orientation); });varReader =NewFileReader (); Reader.onload=function(e) {$ ("#imgUserIco"). attr ("src"), E.target.result); } reader.readasdataurl (file); }}}
5) After clicking the Save button, the background code
using System.IO;
using System.Drawing;
Protected voidSave_click (Objectsender, EventArgs e) { Try{ BLL. TUser Blluser = new BLL. TUser (); Model.tuser Moduser = Blluser.getmodel (((model.tuser) session["Usermodel"). ID); if( This. Fileimg.hasfile) { //Create a folder if(! Directory.Exists (Server.MapPath ("/") +"\\UploadFiles\\HeadIcon") {directory.createdirectory (Server.MapPath ("/") +"\\UploadFiles\\HeadIcon"); if(! Directory.Exists (Server.MapPath ("/") +"\\UploadFiles\\HeadIcon\\Img") {directory.createdirectory (Server.MapPath ("/") +"\\UploadFiles\\HeadIcon\\Img"); } if(! Directory.Exists (Server.MapPath ("/") +"\\UploadFiles\\HeadIcon\\temp") {directory.createdirectory (Server.MapPath ("/") +"\\UploadFiles\\HeadIcon\\temp"); } } //Save Path stringSavepath = Server.MapPath ("/") +"\\UploadFiles\\HeadIcon\\temp\\"+ This. Fileimg.filename; //Compress and save pictures intMaxWidth = -; System.Drawing.Image Imgphoto= System.Drawing.Image.FromStream ( This. fileimg.filecontent); intImgWidth =Imgphoto.width; intImgHeight =Imgphoto.height; if(ImgWidth > MaxWidth | | imgheight >maxWidth) { intNewwidth = ImgWidth >= imgheight? MaxWidth:Convert.ToInt32 (Math.Round (imgwidth * maxwidth/imgheight *1.0)); intNewheight = ImgHeight >= imgwidth? MaxWidth:Convert.ToInt32 (Math.Round (imgheight * maxwidth/imgwidth *1.0)); System.Drawing.Bitmap Newimgphoto=NewSystem.Drawing.Bitmap (Imgphoto, Newwidth, newheight); //iphone picture Rotation Switch( This. Hidorientation.value) { Case "3": Newimgphoto.rotateflip (Rotatefliptype.rotate180flipnone); Break; Case "6": Newimgphoto.rotateflip (Rotatefliptype.rotate90flipnone); Break; Case "8": Newimgphoto.rotateflip (Rotatefliptype.rotate270flipnone); Break; default: Break; } newimgphoto.save (Savepath); } Else { This. FileImg.PostedFile.SaveAs (Savepath); } This. IMGUSERICO.SRC ="/uploadfiles/headicon/temp/"+ This. Fileimg.filename; //Update DataModuser.headicon = THIS.IMGUSERICO.SRC; Moduser.lastdate = DateTime.Now; if (Blluser.update (Moduser)) {session["Usermodel"] = Moduser; Response.Redirect ("Personaldetials.aspx", False); } } } Catch{Response.Redirect ("ErrorPage. aspx",false); } }
Reference:http://blog.csdn.net/linlzk/article/details/48652635
jquery Mobile Upload picture complete example (including iOS picture landscape problem processing and C # Background image compression)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
