使用WebUploader使用，及使用后测试横拍或竖拍图片图片方向不对等解决方案

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。 采用大文件分片并发上传，极大的提高了文件上传效率。

1、引用脚本及样式

 <!--引入CSS-->
 <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

 <!--引入JS-->
 <script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
 <!--引入JS-->
  <script type="text/javascript" src="js2/jquery-1.10.2.min.js"></script>
 <!--引入初始化JS及图片上传到文件服务器-->
 <script type="text/javascript" src="js2/getting-starteder.js"></script>

getting-starteder.js－－图片初始化及处理上传到服务器全是靠这个JS来实现

 // 图片上传demo
 jQuery(function() {
     var $ = jQuery,
         $list = $('#fileList'),
         // 优化retina, 在retina下这个值是2
         ratio = window.devicePixelRatio || ,

         // 缩略图大小
         thumbnailWidth =  * ratio,
         thumbnailHeight =  * ratio,

         // Web Uploader实例
         uploader;

     // 初始化Web Uploader
     uploader = WebUploader.create({

     // 自动上传。
         auto: true,

         // swf文件路径
         swf: BASE_URL + '/js2/Uploader.swf',

         // 文件接收服务端。
        // server:    'http://webuploader.duapp.com/server/fileupload.php',
         server: 'Handler/UploadHandleringNew.ashx',

         // 选择文件的按钮。可选。
         // 内部根据当前运行是创建，可能是input元素，也可能是flash.
         pick: '#filePicker',

         // 只允许选择文件，可选。
         accept: {
             title: 'Images',
             extensions: 'gif,jpg,jpeg,bmp,png',
             mimeTypes: 'image/*'
         }
     });

     // 当有文件添加进来的时候
     uploader.on( 'fileQueued', function( file ) {
         var $li = $(
                 '<div id="' + file.id + '" class="file-item thumbnail">' +
                     '<img>' +
                     '<div class="info">' + file.name + '</div>' +
                 '</div>'
                 ),
             $img = $li.find('img');

         $list.append( $li );

         // 创建缩略图
         uploader.makeThumb( file, function( error, src ) {
             if ( error ) {
                 $img.replaceWith('<span>不能预览</span>');
                 return;
             }

             $img.attr( 'src', src );
         }, thumbnailWidth, thumbnailHeight );
     });

     // 文件上传过程中创建进度条实时显示。
     uploader.on( 'uploadProgress', function( file, percentage ) {
         var $li = $( '#'+file.id ),
             $percent = $li.find('.progress span');

         // 避免重复创建
         if ( !$percent.length ) {
             $percent = $('<p class="progress"><span></span></p>')
                     .appendTo( $li )
                     .find('span');
         }

         $percent.css( 'width', percentage *  + '%' );
     });

     // 文件上传成功，给item添加成功class, 用样式标记上传成功。
     uploader.on( 'uploadSuccess', function( file ) {
         $( '#'+file.id ).addClass('upload-state-done');
     });

     // 文件上传失败，现实上传出错。
     uploader.on( 'uploadError', function( file ) {
         var $li = $( '#'+file.id ),
             $error = $li.find('div.error');

         // 避免重复创建
         if ( !$error.length ) {
             $error = $('<div class="error"></div>').appendTo( $li );
         }

         $error.text('上传失败');
     });

     // 完成上传完了，成功或者失败，先删除进度条。
     uploader.on( 'uploadComplete', function( file ) {
     $('#' + file.id).find('.progress').remove();
     //alert('上传成功');
     });
 });

2、页面上代码：

<!--dom结构部分-->
<div id="uploader-demo">
    <!--用来存放item-->
    <div id="fileList" class="uploader-list"></div>
    <div id="filePicker">选择图片</div>
</div>

我用是NET+ashx

上传后，由于WebUploader后，缩略图的正常，而上传服务器后，横拍的图片显示

如下图：

－－上传到服务器后

解决方案：

在上传到服务器之前对图片进行强制转换方向，服务端把 jpeg 的图片纠正一下

根据照片的Exif信息修正

 public static void RotateImage(Image img)
         {
             PropertyItem[] exif = img.PropertyItems;
             byte orientation = ;
             foreach (PropertyItem i in exif)
             {
                 if (i.Id == )
                 {
                     orientation = i.Value[];
                     i.Value[] = ;
                     img.SetPropertyItem(i);
                 }
             }

             switch (orientation)
             {
                 case :
                     img.RotateFlip(RotateFlipType.RotateNoneFlipX);
                     break;
                 case :
                     img.RotateFlip(RotateFlipType.Rotate180FlipNone);
                     break;
                 case :
                     img.RotateFlip(RotateFlipType.RotateNoneFlipY);
                     break;
                 case :
                     img.RotateFlip(RotateFlipType.Rotate90FlipX);
                     break;
                 case :
                     img.RotateFlip(RotateFlipType.Rotate90FlipNone);
                     break;
                 case :
                     img.RotateFlip(RotateFlipType.Rotate270FlipX);
                     break;
                 case :
                     img.RotateFlip(RotateFlipType.Rotate270FlipNone);
                     break;
                 default:
                     break;
             }
             foreach (PropertyItem i in exif)
             {
                 if (i.Id == )
                 {
                     i.Value = BitConverter.GetBytes(img.Width);
                 }
                 else if (i.Id == )
                 {
                     i.Value = BitConverter.GetBytes(img.Height);
                 }
             }
         }

这样就可以完美解决！！！

Exif specification 对图片方向说明

关于Exif Orientation标志的定义 http://sylvana.net/jpegcrop/exif_orientation.html

UploadHandleringNew.ashx

Value	0th Row	0th Column
1	top	left side
2	top	right side
3	bottom	right side
4	bottom	left side
5	left side	top
6	right side	top
7	right side	bottom
8	left side	bottom

 <%@ WebHandler Language="C#" Class="UploadHandleringNew" %>

 using System;
 using System.Data;
 using System.Configuration;
 using System.Collections;
 using System.Web;
 using System.IO;
 using System.Web.Security;
 using System.Web.UI;
 using System.Web.UI.WebControls;
 using System.Web.UI.WebControls.WebParts;
 using System.Web.UI.HtmlControls;
 using ysw.BLL;
 using ysw.Models;
 using System.Drawing;

 public class UploadHandleringNew : IHttpHandler, System.Web.SessionState.IRequiresSessionState
 {
     public string camera = String.Empty;//机型
     public string focalLength = String.Empty;//焦距
     public string shutterSpeed = String.Empty;//速度
     public string aperture = String.Empty;//光圈
     public string iso = String.Empty;//感光度
     public string treePath = System.Web.HttpContext.Current.Server.MapPath("~/");
     public void ProcessRequest(HttpContext context)
     {
         context.Response.ContentType = "text/plain";
         context.Response.Charset = "utf-8";
         context.Response.ContentEncoding = System.Text.Encoding.UTF8;
         System.Collections.Generic.IList<TempImages> list = new System.Collections.Generic.List<TempImages>();
         if (context.Session["TempImageList"] != null)
         {
             list = context.Session["TempImageList"] as System.Collections.Generic.IList<TempImages>;
         }

         if (list.Count >= )
         {
             context.Response.Write("上传数量已经超出系统限制的6个文件");
             return;

         }
         else
         {
             HttpPostedFile file = context.Request.Files[];
             string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]) + "\\";

             if (file != null)
             {
                 if (!System.IO.Directory.Exists(uploadPath))
                 {
                     System.IO.Directory.CreateDirectory(uploadPath);
                 }
                 Random random = new Random();
                 string fileName = DateTime.Now.ToString("yyyy-MM-dd") + "-" + random.Next() + file.FileName.Substring(file.FileName.Length - );     // 文件名称
                 string fileName_s = "x_" + fileName;      // 缩略图文件名称
                 string fileName_syp = "water_" + fileName; // 水印图文件名称（图片)
                 string webFilePath = "";
                 string webFilePath_s = "";
                 string webFilePath_s1 = "";
                 string webFilePath_syp = "";
                 webFilePath = treePath + @"originalImages\" + fileName;   // 服务器端文件路径
                 webFilePath_s = treePath + @"thumbnails\" + fileName_s; // 服务器端缩略图路径
                 webFilePath_syp = treePath + @"waterImages\" + fileName_syp;　// 服务器端带水印图路径(图片)
                 webFilePath_s1 = treePath + @"thumbnails166\" + fileName_s; // 服务器端缩略图路径
                 string webFilePath_sypf = System.Web.HttpContext.Current.Server.MapPath(@"~/images/synew.png");　     // 服务器端水印图路径(图片)
                 file.SaveAs(webFilePath);

                 AddWaterPic(webFilePath, webFilePath_syp, webFilePath_sypf);//生成图片水印图 

                 int towidth = ;
                 int toheight = ;
                 //MakeImage1(webFilePath, webFilePath_syp, 500);
                 MakeImage(webFilePath, webFilePath_s, );
                 //将临时数据保存到临时表中
                 TempImages tempImage = new TempImages();
                 tempImage.ISBN = fileName;
                 if (context.Session["UserInfo"] != null)
                 {
                     tempImage.UserId = (context.Session["UserInfo"] as ysw.Model.UserInfo).Id;
                 }
                 else
                 {
                     tempImage.UserId = ;
                 }

                 tempImage.CreateTime = DateTime.Now;
                 tempImage.Id = TempImageManager.AddTempImages(tempImage);
                 if (tempImage.Id > )
                 {
                     list.Add(tempImage);
                     context.Session["TempImageList"] = list;
                     string str = "waterImages/" + fileName_syp + ",thumbnails/" + fileName_s + "," + camera + "," + focalLength + "," + shutterSpeed + "," + aperture + "," + iso;
                     //上传成功后让上传队列的显示自动消失
                     //string str = fileName + ",";
                     //int toheight1 = 90;
                     // int towidth1 = 90;
                     // if ((double)towidth >(double)toheight)
                     // {
                     //     toheight1 = toheight * 90 / towidth;
                     // }
                     // else
                     // {
                     //     towidth1 = towidth * 90 / toheight;
                     // }
                     // str += towidth1 + "," + toheight1;
                     context.Response.Write(str);
                 }
                 else
                 {
                     context.Response.Write("");
                 }
             }
             else
             {
                 context.Response.Write("");
             }
         }
     }
     public static void rotating(string Path_syp)
     {
         System.Drawing.Image img = System.Drawing.Image.FromFile(Path_syp);

         System.Drawing.Imaging.PropertyItem[] exif = img.PropertyItems;
         byte orientation = ;
         foreach (System.Drawing.Imaging.PropertyItem i in exif)
         {
             if (i.Id == )
             {
                 orientation = i.Value[];
                 i.Value[] = ;
                 img.SetPropertyItem(i);
             }
         }

         switch (orientation)
         {
             case :
                 img.RotateFlip(RotateFlipType.RotateNoneFlipX);
                 break;
             case :
                 img.RotateFlip(RotateFlipType.Rotate180FlipNone);
                 break;
             case :
                 img.RotateFlip(RotateFlipType.RotateNoneFlipY);
                 break;
             case :
                 img.RotateFlip(RotateFlipType.Rotate90FlipX);
                 break;
             case :
                 img.RotateFlip(RotateFlipType.Rotate90FlipNone);
                 break;
             case :
                 img.RotateFlip(RotateFlipType.Rotate270FlipX);
                 break;
             case :
                 img.RotateFlip(RotateFlipType.Rotate270FlipNone);
                 break;
             default:
                 break;     

         }
         foreach (System.Drawing.Imaging.PropertyItem i in exif)
         {
             if (i.Id == )
             {
                 i.Value = BitConverter.GetBytes(img.Width);
             }
             else if (i.Id == )
             {
                 i.Value = BitConverter.GetBytes(img.Height);
             }
         }

         //System.Drawing.Image bitmap = new System.Drawing.Bitmap(500, 500);

         //System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);

         //    //以jpg格式保存缩略图
         //    bitmap.Save(Path_syp, System.Drawing.Imaging.ImageFormat.Jpeg);

         //    //image.Dispose();
         //    bitmap.Dispose();
         //    g.Dispose();

     }
     /// <summary>
     /// 生成缩略图方法(700px图片)
     /// </summary>
     /// <param name="webFilePath"></param>
     /// <param name="webFilePath_s"></param>
     /// <param name="size"></param>
     private static void MakeImage1(string webFilePath, string webFilePath_s, int size)
     {
         System.Drawing.Image image = System.Drawing.Image.FromFile(webFilePath);
         int towidth = size;
         int toheight = size;
         int x = ;
         int y = ;
         int ow = image.Width;
         int oh = image.Height;
         toheight = image.Height * size / image.Width;
         System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);              //新建一个画板
         System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);              //设置高质量插值法
         g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;              //设置高质量,低速度呈现平滑程度
         g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;              //清空画布并以透明背景色填充
         g.Clear(System.Drawing.Color.Transparent);              //在指定位置并且按指定大小绘制原图片的指定部分
         g.DrawImage(image, new System.Drawing.Rectangle(, , towidth, toheight), new System.Drawing.Rectangle(x, y, ow, oh), System.Drawing.GraphicsUnit.Pixel);
         g.Dispose();
         bitmap.Save(webFilePath_s, System.Drawing.Imaging.ImageFormat.Jpeg);
         image.Dispose();
     }
     /// <summary>
     /// 生成缩略图
     /// </summary>
     /// <param name="webFilePath">原图的路径</param>
     /// <param name="webFilePath_s">缩略图的路径</param>
     /// <param name="size">缩略图的大小</param>
     public static void MakeImage(string webFilePath, string webFilePath_s, int size)
     {
         System.Drawing.Image image = System.Drawing.Image.FromFile(webFilePath);
         int towidth = size;
         int toheight = size;
         int x = ;
         int y = ;
         int ow = image.Width;
         int oh = image.Height;

         if ((double)image.Width / (double)image.Height > (double)towidth / (double)toheight)
         {
             oh = image.Height;
             ow = image.Height * towidth / toheight;
             y = ;
             x = ;
         }
         else
         {
             ow = image.Width;
             oh = image.Width * toheight / towidth;
             x = ;
             y = ;
         }
         System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);              //新建一个画板
         System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);              //设置高质量插值法
         g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;              //设置高质量,低速度呈现平滑程度
         g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;              //清空画布并以透明背景色填充
         g.Clear(System.Drawing.Color.Transparent);              //在指定位置并且按指定大小绘制原图片的指定部分
         g.DrawImage(image, new System.Drawing.Rectangle(, , towidth, toheight), new System.Drawing.Rectangle(x, y, ow, oh), System.Drawing.GraphicsUnit.Pixel);
         try
         {
             //以jpg格式保存缩略图
             bitmap.Save(webFilePath_s, System.Drawing.Imaging.ImageFormat.Jpeg);
         }
         catch (System.Exception e)
         {
             throw e;
         }
         finally
         {
             image.Dispose();
             bitmap.Dispose();
             g.Dispose();
         }
     }
     /// <summary>
     /// 生成水印缩略图
     /// </summary>
     /// <param name="Path"></param>
     /// <param name="Path_syp"></param>
     /// <param name="Path_sypf"></param>
     protected void AddWaterPic(string Path, string Path_syp, string Path_sypf)
     {
         System.Drawing.Image image = System.Drawing.Image.FromFile(Path);
         System.Drawing.Image copyImage = System.Drawing.Image.FromFile(Path_sypf);

         System.Drawing.Imaging.PropertyItem[] exif = image.PropertyItems;
         byte orientation = ;
         foreach (System.Drawing.Imaging.PropertyItem i in exif)
         {
             if (i.Id == )
             {
                 orientation = i.Value[];
                 i.Value[] = ;
                 image.SetPropertyItem(i);
             }
         }

         switch (orientation)
         {
             case :
                 image.RotateFlip(RotateFlipType.RotateNoneFlipX);
                 break;
             case :
                 image.RotateFlip(RotateFlipType.Rotate180FlipNone);
                 break;
             case :
                 image.RotateFlip(RotateFlipType.RotateNoneFlipY);
                 break;
             case :
                 image.RotateFlip(RotateFlipType.Rotate90FlipX);
                 break;
             case :
                 image.RotateFlip(RotateFlipType.Rotate90FlipNone);
                 break;
             case :
                 image.RotateFlip(RotateFlipType.Rotate270FlipX);
                 break;
             case :
                 image.RotateFlip(RotateFlipType.Rotate270FlipNone);
                 break;
             default:
                 break;

         }
         foreach (System.Drawing.Imaging.PropertyItem i in exif)
         {
             if (i.Id == )
             {
                 i.Value = BitConverter.GetBytes(image.Width);
             }
             else if (i.Id == )
             {
                 i.Value = BitConverter.GetBytes(image.Height);
             }
         }

         int towidth = ;
         int toheight = ;
         int x = ;
         int y = ;
         int ow = image.Width;
         int oh = image.Height;
         if (image.Width <  )
         {
             toheight = image.Height;
             towidth = image.Width;
         }
         else
         {
             towidth = ;
             toheight = image.Height *  / image.Width;

         }
         //rotating(Path);

         System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight);
         System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap);

         g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;              //设置高质量,低速度呈现平滑程度
         g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;              //清空画布并以透明背景色填充
         g.Clear(System.Drawing.Color.Transparent);              //在指定位置并且按指定大小绘制原图片的指定部分
         g.DrawImage(image, new System.Drawing.Rectangle(, , towidth, toheight), new System.Drawing.Rectangle(x, y, ow, oh), System.Drawing.GraphicsUnit.Pixel);

         g.DrawImage(copyImage, new System.Drawing.Rectangle(bitmap.Width -  - copyImage.Width, bitmap.Height -  - copyImage.Height, copyImage.Width, copyImage.Height), , , copyImage.Width, copyImage.Height, System.Drawing.GraphicsUnit.Pixel);
         g.Dispose();

         bitmap.Save(Path_syp);
         image.Dispose();
     }
     public bool IsReusable {
         get {
             return false;
         }
     }

 }