您的位置：首页 > Web前端 > JQuery

jquery mobile上传图片完整例子（包含ios图片横向问题处理和C#后台图片压缩）

2016-05-12 19:46 701 查看
上传图片本身是个基本的小功能，但是到了移动端就不那么简单了，相信找到这篇文章的你一定有深深的同感。

本文实例是：在（移动端）页面中点击图片，然后选择文件，然后保存。使用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
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航