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

本文实例是：在（移动端）页面中点击图片，然后选择文件，然后保存。使用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. EasyUI-datagrid 对于展示数据进行处理(formatter)
			
    一:声明datagrid列,在列中添加formatter属性,并指定js方法 columns = [[ { title: '编号', field: 'Id', width: 100, sortable ...
    
			
    2. 
						
  2. DNS域名解析服务器
			
    域名解析服务器,靠它把你要访问的网址找到然后把信息送到你电脑上.DNS 是域名系统 (Domain Name System) 的缩写,它是由解析器和域名服务器组成的.域名服务器是指保存有该网络中所有主 ...
    
			
    3. 
						
  3. Java网络编程初探
			
    IP地址案例 package ch17; import javax.swing.text.Style; import java.net.InetAddress; /** * Created by Ji ...
    
			
    4. 
						
  4. ROS学习笔记（六）——创建、编译包
			
    $ cd ~/catkin_ws #如果新开一个终端,就需要先吧ROS的工作空间配置好 $ source devel/setup.bash #工作空间的环境配置 #正式开始创建包 $ catkin_c ...
    
			
    5. 
						
  5. python画柱状图
			
    #coding:utf-8 __author__ = 'similarface' from collections import defaultdict PMRAdata=defaultdict(li ...
    
			
    6. 
						
  6. 两个list 合并成新一个list
			
    
			
    7. 
						
  7. Win7全自动精简批处理_温柔处理极速修正版/暴力剩女工程测试版
			
    2011htpcfans 发表于 2012-5-11 http://bbs.wuyou.net/forum.php?mod=viewthread&tid=210269&highligh ...
    
			
    8. 
						
  8. SSIS学习笔记
			
    SSIS全称(Sql Server Integration Services),是 Microsoft BI 解决方案的一大利器.除了作为ETL的一种工具,在以下方面还有着突出的表现: (1) 系统维 ...
    
			
    9. 
						
  9. 高德地图JavaScript开发
			
    项目需求:标注一个或者两个点.显示信息窗体.自定义icon <!DOCTYPE html> <html lang="en"> <head> &l ...
    
			
    10. 
						
  10. AX2012 multiple enum values as query filter选择多个枚举值当过滤条件
			
    classDeclaration { QueryBuildRange qbrLocationType; } datasource.init() { super(); qbrLocationType = ...
    
			
    11.