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

本文实例是：在（移动端）页面中点击图片，然后选择文件，然后保存。使用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. jQuery 遍历方法
			
    http://www.runoob.com/jquery/jquery-ref-traversing.html
    
			
    2. 
						
  2. Http referer origin
			
    为了防止CSRF的攻击,我们建议修改浏览器在发送POST请求的时候加上一个Origin字段,这个Origin字段主要是用来标识出最初请求是从哪里发起的.如果浏览器不能确定源在哪里,那么在发送的请求里面 ...
    
			
    3. 
						
  3. JS实现继承的几种方式
			
    前言 JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一.那么如何在JS中实现继承呢?让我们拭目以待. JS继承的实现方式 既然要实现继承,那么首先我们得有一个父类,代码如下: // 定义一个 ...
    
			
    4. 
						
  4. 18TH赛事管理
			
    赛事管理者 项目psp: 一.计划 估计这个任务需要7天时间 二.开发 1.需求分析 作为一个赛事管理者,我希望知道每场比赛的队伍得分和积分情况,以便给每队进行排名. 2.生成设计文档 查询出每场得分 ...
    
			
    5. 
						
  5. 【burp】配置HTTPS抓包方法
			
    以Chrome为例,配置HTTPS抓包方法 1.获取破解版的burp,将BurpLoader.jar和burpsuite_pro_v1.5.18.jar放到一个路径下 2.在cmd里进入上述两个jar ...
    
			
    6. 
						
  6. python——django入门篇
			
    要做一只有自学能力的pythoner,尽管大多数自学都是野生并不规范的,会遇到诸多坑,最后用稀奇古怪的方法解决了,但是先了解一些为以后真正学习道路填坑方便了简直不只一点点...重点来了:感觉以班里同学 ...
    
			
    7. 
						
  7. python——线程与多线程基础
			
    我们之前已经初步了解了进程.线程与协程的概念,现在就来看看python的线程.下面说的都是一个进程里的故事了,暂时忘记进程和协程,先来看一个进程中的线程和多线程.这篇博客将要讲一些单线程与多线程的基础 ...
    
			
    8. 
						
  8. 谈谈javascript中的日期Date对象
			
    一.日期对象  在javascript中并没有日期型的数据类型,但是提供了一个日期对象可以操作日期和时间.  日期对象的创建:  new Date();二.将日期对象转换为字符串  将日期对象转换为字 ...
    
			
    9. 
						
  9. 简单的例子 关于Java内存管理的讲解
			
    我想做的是,逐行读取文件,然后用该行的电影名去获取电影信息.因为源文件较大,readlines()不能完全读取所有电影名,所以我们逐行读取. 就这段代码,我想要在位置二处使用base64,然后结果呢? ...
    
			
    10. 
						
  10. html/css小练习2
			
    效果图:
    
			
    11.