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

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

                    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 "": newImgPhoto.RotateFlip(RotateFlipType.Rotate180FlipNone); break;

                            case "": newImgPhoto.RotateFlip(RotateFlipType.Rotate90FlipNone); break;

                            case "": 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
												


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

    
								
  1. jquery mobile 按钮部件（包含图标的使用）
		
    参考网址:http://api.jquerymobile.com/1.3/button/ 注:按钮的三种写法 <a href="#" class="ui-btn u ...
    
		
    2. 
						
  2. 自学JQuery Mobile的几个例子
		
    JQuery Mobile是一个用于构建移动Web应用程序的框架,适用于主流的移动设备(智能手机.平板电脑),该框架利用了HTML5和CSS3技术减少了额外的脚本文件的编写.具体JQuery Mobi ...
    
		
    3. 
						
  3. .net网站上传图片换电脑不显示 当不用网站的IP地址访问图片，只用相对路径访问时，在发布网站的时候，将上传图片的目标文件夹，包含在项目中再发布即可。
		
    .net网站上传图片换电脑不显示 当不用网站的IP地址访问图片,只用相对路径访问时,在发布网站的时候,将上传图片的目标文件夹,包含在项目中再发布即可.
    
		
    4. 
						
  4. jquery实现上传图片及图片大小验证、图片预览效果代码
		
    jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...
    
		
    5. 
						
  5. JQuery Mobile 图片布局
		
    JQuery Mobile 图片布局 1.实现效果
    
		
    6. 
						
  6. jquery mobile图片自适应屏幕
		
    jquery mobile中如果不给img标签指定宽度的话,无法达到自适应屏幕的效果,特此备注:width:100%;
    
		
    7. 
						
  7. jquery mobile 表单提交 图片/文件 上传
		
    jquerymobile 下面 form 表单提交 和普通html没区别,最主要是 <form 要加一个 data-ajax='false' 否则 上传会失败 1  html代码 <!do ...
    
		
    8. 
						
  8. jQuery Mobile(jqm)button的隐藏和显示,包含a标签,圆角和非圆角button
		
    在移动互联网时代,HTML5开发越来越收到欢迎. 于是各种HTML5的框架都出来了.因为对于jquery的熟悉,jquery mobile 为多数人选择学习的对象.我也是众多追求者之中的一个.近期一直 ...
    
		
    9. 
						
  9. iOS开发——UI进阶篇（十八）核心动画小例子，转盘（裁剪图片、自定义按钮、旋转）图片折叠、音量震动条、倒影、粒子效果
		
    一.转盘(裁剪图片.自定义按钮.旋转) 1.裁剪图片 将一张大图片裁剪为多张 // CGImageCreateWithImageInRect:用来裁剪图片 // image:需要裁剪的图片 // re ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. B/S网站中IE6兼容问题
			
    在HTML中定义的样式,部分样式在IE7以前的版本中的效果是不同的,所以需要在网页中定义让浏览器以IE8的模式启动. 在HEAD中定义标签meta如下: <meta http-equiv=&qu ...
    
			
    2. 
						
  2. layer弹出层全屏及关闭
			
    一.首先引用JS文件 <script src="../../js/common/layer/layer.js"></script> 二.全屏调用以下代码 v ...
    
			
    3. 
						
  3. caroufredsel 参数
			
    caroufredsel 参数 参数列表:参数名     默认值     说明circular     true     循环模式,true为无限循环,false为单轮循环.infinite      ...
    
			
    4. 
						
  4. C++编程小知识随手记
			
    C++编程小知识点: (1)queue和vector类型: 加入元素 : queue是queue.push(),vector是vector.push_back(), 删除元素: queue是queue ...
    
			
    5. 
						
  5. Hadoop中wordcount程序
			
    一.测试过程中 输入命令: 首先需要在hadoop集群中添加文件 可以首先进行查看hadoop集群中文件目录 hadoop fs -ls / hadoop fs -ls -R / hadoop fs  ...
    
			
    6. 
						
  6. &nbsp;空格用法
			
    记录一下,空格的转义字符分为如下几种:平时一般用的是 1.  &160#;不断行的空白(1个字符宽度)2.  &8194#;半个空白(1个字符宽度)3.  &8195#;一个空 ...
    
			
    7. 
						
  7. 机器学习之决策树熵&信息增量求解算法实现
			
    此文不对理论做相关阐述,仅涉及代码实现: 1.熵计算公式: P为正例,Q为反例 Entropy(S)   = PLog2(P) - QLog2(Q); 2.信息增量计算: Gain(S,Sv) = E ...
    
			
    8. 
						
  8. Unity3D 中的协程
			
    若干文章: 1.Coroutine,你究竟干了什么? 2.Radical Coroutines 3.Extended Unity Coroutines
    
			
    9. 
						
  9. 从客户端(Content="<p>测试</p>")中检测到有潜在危险的 Request.Form 值
			
    .NetFrameWork 4.0 Validaterequest="false"不起作用 要恢复到2.0的ASP.NET请求验证功能的行为,要在以下设置 Web.config中  ...
    
			
    10. 
						
  10. MySQL全文检索
			
    参考一:http://www.cnblogs.com/feichexia/archive/2012/06/09/2543049.html
    
			
    11.