上傳圖片本身是個基本的小功能，但是到了移動端就不那么簡單了，相信找到這篇文章的你一定有深深的同感。
本文實例是：在（移動端）頁面中點擊圖片，然后選擇文件，然后保存。使用Asp.net
難點一：后台獲取不到FileUpload的文件
解決方案：在 form 中添加 enctype="multipart/form-data" data-ajax="false"
難點二：ios圖片上傳后顯示為橫向圖片(ios橫拍照片無此問題；Android無此問題)
解決方案：加載exif.js，使用Orientation屬性判斷其旋轉角度
完整代碼如下：
1）頁面頭部加載exif.js，下載地址：http://code.ciaoca.com/javascript/exif-js/
<head runat="server"> <script src="exif.js"></script> </head>
2）頁面HTML
<body> <form id="form1" runat="server" enctype="multipart/form-data" data-ajax="false"> <div data-role="page" id="pageone"> <div data-role="main" id="mainBody"> <img src="img/errimg.jpg" onerror="this.src='/img/errimg.jpg'" id="imgUserIco" runat="server" />
<asp:Button ID="Save" runat="server" OnClick="Save_Click" Text="保存" />
</div> </div> <%--以下是Hidden--%> <asp:FileUpload ID="fileImg" runat="server" onchange="imgUserIco2Preview(this);" Style="display: none" /> <asp:HiddenField ID="hidOrientation" runat="server" Value="1" /> </form> </body>
3）點擊圖片的事件
$("#imgUserIco").on("click", function () {
$("#fileImg").click();
});
4）上傳控件中的圖片路徑改變后的事件
function imgUserIco2Preview(o) { if (o.files && o.files[0]) { var file = o.files[0]; var Orientation = null;//旋轉角度：1）0度，3）180度， 6）順時針90度，8）逆時針90度 var fileName = file.name; var fileType = fileName.substr(fileName.lastIndexOf("."), fileName.length - fileName.lastIndexOf(".")).toLowerCase(); if (".gif.png.jpeg.jpg.bmp".indexOf(fileType) > -1) { //保存旋轉角度 EXIF.getData(file, function () { //alert(EXIF.pretty(this)); EXIF.getAllTags(this); //alert(EXIF.getTag(this, 'Orientation')); Orientation = EXIF.getTag(this, 'Orientation'); $("#hidOrientation").val(Orientation); }); var reader = new FileReader(); reader.onload = function (e) { $("#imgUserIco").attr("src", e.target.result); } reader.readAsDataURL(file); } } }
5）點擊保存按鈕后，后台代碼
using System.IO;
using System.Drawing;
protected void Save_Click(object sender, EventArgs e) { try { BLL.TUser bllUser = new BLL.TUser(); Model.TUser modUser = bllUser.GetModel(((Model.TUser)Session["USERModel"]).ID); if (this.fileImg.HasFile) { //創建文件夾 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"); } } //保存路徑 string savePath = Server.MapPath("/") + "\\UploadFiles\\HeadIcon\\temp\\" + this.fileImg.FileName; //壓縮並保存圖片 int maxWidth = 500; System.Drawing.Image imgPhoto = System.Drawing.Image.FromStream(this.fileImg.FileContent); int imgWidth = imgPhoto.Width; int imgHeight = imgPhoto.Height; if (imgWidth > maxWidth || imgHeight > maxWidth) { int newWidth = imgWidth >= imgHeight ? maxWidth : Convert.ToInt32(Math.Round(imgWidth * maxWidth / imgHeight * 1.0)); int newHeight = imgHeight >= imgWidth ? maxWidth : Convert.ToInt32(Math.Round(imgHeight * maxWidth / imgWidth * 1.0)); System.Drawing.Bitmap newImgPhoto = new System.Drawing.Bitmap(imgPhoto, newWidth, newHeight); //iphone圖片旋轉 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; //更新數據 modUser.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); } }
參考文獻：http://blog.csdn.net/linlzk/article/details/48652635