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

本文实例是：在（移动端）页面中点击图片，然后选择文件，然后保存。使用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. 注册码_EditPlus3
			
    1.来自"http://jingyan.baidu.com/article/67508eb4d78cfe9cca1ce488.html" Name:  www.cnzz.cc Co ...
    
			
    2. 
						
  2. 转：java怎么用一行代码初始化ArrayList
			
    java怎么用一行代码初始化ArrayList 您可以创建一个工厂方法: public static ArrayList<String> createArrayList(String .. ...
    
			
    3. 
						
  3. git入门网站
			
    http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 git入门教程:对商业的.开源的. ...
    
			
    4. 
						
  4. CentOS 安装 lamp(转)
			
    一般情况下,安装的都是最新的正式版,除非你有特殊需求,要安装指定的版本,本文暂不讨论.从最基础的开始,一点点完成一个可用的 Linux 主机.这里就开始介绍如何在 CentOS 6.0 上安装 LAM ...
    
			
    5. 
						
  5. h5
			
    1. 在iPhone 手机上默认值是(电话号码显示为拨号的超链接): <meta name="format-detection" content="telephon ...
    
			
    6. 
						
  6. MAC OSX环境下cordova+Ionic的安装配置
			
    一.简介 1.Ionic是什么 IONIC 是目前最有潜力的一款 HTML5 手机应用开发框架.通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用. 它使用 JavaSc ...
    
			
    7. 
						
  7. 获取Mac地址
			
    netapi32.lib#include <NB30.h>; typedef struct _ASTAT_ { ADAPTER_STATUS adapt; NAME_BUFFER Name ...
    
			
    8. 
						
  8. angular路由
			
    ngRoute需要引进以下文件 <script src="http://code.angularjs.org/1.2.5/angular.min.js"></sc ...
    
			
    9. 
						
  9. 深入浅出Mybatis系列（五）---TypeHandler简介及配置（mybatis源码篇）
			
    上篇文章<深入浅出Mybatis系列(四)---配置详解之typeAliases别名(mybatis源码篇)>为大家介绍了mybatis中别名的使用,以及其源码.本篇将为大家介绍TypeH ...
    
			
    10. 
						
  10. ASP.NET MVC多表单提交
			
    多表单提交需要写清路径,以便主程序可以找到 方法一:直接写路径, action="~/Home/other1"   "~"表示从根目录开始 方法2:@using ...
    
			
    11.