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

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

本文实例是：在（移动端）页面中点击图片，然后选择文件，然后保存。使用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#后台图片压缩）的更多相关文章

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

随机推荐

javascript中的窗口和框架
框架: 在网络上我们可以看到很多WEB应用程序都是使用框架(frame)来分隔浏览器窗口的,就想一块块玻璃隔板把窗口分隔成好几个小窗口,并且可以在不同的小窗口中加载显示不同的页面,这样在我们看来好像是 ...
让Java和MySQL连接起来
Java 连接 MySQL 需要驱动包,可以下载菜鸟教程提供的 jar 包:http://static.runoob.com/download/mysql-connector-java-5.1.39- ...
Java多线程初探
多线程单线程的程序只有一个顺序执行流.多个顺序流之间互不干扰. 多线程的创建定义Thread类的子类,重写该类的run()方法. 创建Thread子类的实例. 调用线程对象的start()方法来启 ...
qt开源社区学习
http://bbs.qter.org/forum.php?mod=forumdisplay&fid=52
Python之路 day3 全局变量、局部变量
#!/usr/bin/env python # -*- coding:utf-8 -*- #Author:ersa """ 全局与局部变量在子程序中定义的变量称为局部变 ...
fiddler 命令
Fiddler内置的命令有如下几种: 1. select命令. 选择所有相应类型(指content-type)为指定类型的HTTP请求,如选择图片,使用命令select image.而select c ...
ExtJS Grid导出excel文件
ExtJS Grid导出excel文件, 需下载POI:链接:http://pan.baidu.com/s/1i3lkPhF 密码:rqbg 1.将Grid表格数据连同表格列名传到后台 2.后台导出e ...
c#基础3
Console.WriteLine("屏幕显示的内容"); Console.Write("屏幕显示的内容"); 两者区别是:Console.WriteLine( ...
centos 6.5重置Root密码
按任意键进入菜单界面在开始引导的时候,进入开机启动界面(如下图) 然后按一下键盘上面的"e" 3.进入如下图界面,我这边选择第二个按下键盘上的"e"键.(不同 ...
3个sprint的团队贡献分
第一次冲刺贡献分成员名字贡献分 101丘娟 23 108周诗琦 26 107杨晓霞 24 124陈程 27 第二次冲刺贡献分成员名字贡献分 101丘娟 23 108周诗琦 27 ...

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

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

随机推荐

热门专题