“上传图片到服务器”之SWFUpload与imgAreaSelect的使用----实现

一、将SWFUpload与imgAreaSelect一起配置至到项目中

imageareaselect网址:http://odyniec.net/projects/imgareaselect/usage.html

二、分别建立其它文件夹：Pages、JS、Tools、Handlers、Upload

Pages文件夹---------------用来存放静态或动态页面

JS文件夹--------------------用来存放JS文件

Tools文件夹----------------用来存放工具类

Handlers--------------------用来存放一般处理程序

Upload-----------------------用来存放上传成功后的文件

先配置服务器端，再配置前端

在Tools文件夹下新建一个MyTool类

public class MyTool
{
     #region ISPicture是判断一个文件是不是图片
     public static bool ISPicture(HttpPostedFile file)
     {
        bool result = false;
        string[] exts = "bmp,jpg,png,tiff,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw".Split(new char[] { ',' });
        List<string> extList = new List<string>();
        extList.AddRange(exts);
        string ext = Path.GetExtension(file.FileName).Substring(1).ToLower();
        if (extList.Contains(ext))
        {
           result = true;
        }
        return result;
      }
      #endregion

      #region GetMD5拿一个流的MD5值
      public static string GetMD5(Stream stream)
      {
         string result = string.Empty;
         MD5CryptoServiceProvider md5 = new MD5CryptoServiceProvider();
         byte[] bytes = md5.ComputeHash(stream);
         StringBuilder sb = new StringBuilder();
         for (int i = 0; i < bytes.Length; i++)
         {
             sb.Append(bytes[i].ToString("X2"));
         }
         result = sb.ToString();
         return result;
       }
       #endregion

       #region 计算一个Image对象的md5值
? ? ? ?public static string GetMD5(Image img)
? ? ? ?{
? ? ? ? ? string result = string.Empty;
? ? ? ? ? using(MemoryStream ms=new MemoryStream())
? ? ? ? ? {
? ? ? ? ? ? ? ? //首先将Image对象转换为byte[]
? ? ? ? ? ? ? ? BinaryFormatter bf = new BinaryFormatter();
? ? ? ? ? ? ? ? bf.Serialize(ms,(object)img);
? ? ? ? ? ? ? ? byte[] imgbytes = ms.ToArray();
? ? ? ? ? ? ? ? MD5CryptoServiceProvider md5 = new MD5CryptoServiceProvider();
? ? ? ? ? ? ? ? byte[] bytes= md5.ComputeHash(imgbytes);
? ? ? ? ? ? ? ? StringBuilder sb = new StringBuilder();
? ? ? ? ? ? ? ? for (int i = 0; i < bytes.Length; i++)
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? sb.Append(bytes[i].ToString("X2"));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? result = sb.ToString();
? ? ? ? ? }
? ? ? ? ? return result;
? ? ? ?}
? ? ? ?#endregion

       #region CreateDirectory先去判断一个文件夹存不存在，如果不存在的话新建它
       public static void CreateDirectory(string path)
       {
          if (!Directory.Exists(path))
          {
             Directory.CreateDirectory(path);
          }
       }
       #endregion
}

2、在Handlers文件夹中新建UploadFile.ashx

public void ProcessRequest(HttpContext context)
{
    context.Response.ContentType = "text/plain";
    HttpPostedFile pfile = context.Request.Files["Filedata"];
    //判断是不是图片  
    if (!MyTool.ISPicture(pfile))
    {
      return;
    }

    //准备新的文件名称,准备新的保存路径  
    string newfilename = MyTool.GetMD5(pfile.InputStream) + Path.GetExtension(pfile.FileName);
    string newpath = "/Upload/" + DateTime.Now.ToString("yyyyMMdd");
    MyTool.CreateDirectory(context.Request.MapPath(newpath));
    string path = Path.Combine(context.Request.MapPath(newpath),newfilename);

    //执行保存操作  
    pfile.SaveAs(path);
    context.Response.Write("ok:" + newpath + "/" + newfilename);  
}

3、在Pages文件夹中新建UploadFile.htm

HtmlCode

<div id="swfu-placeholder"><!--swfupload文件选择按钮占位符，执行下面的js后，这里将被替换成swfupload上传按钮--></div>
<span id="swfu-upload-status"><!--用来显示上传的信息---></span>
<div><input type="button" onclick="swfu.startUpload();" value="上传" /></div>

<img id="pimg" /><!--用来显示上传成功之后的图片-->

<input type="button" id="btnCut" value="剪切"/> <!--用来剪切图片的按钮-->
<img id="smallimg"/><!--用来显示剪切后的小图-->

JS

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<script src="/swfu/swfupload.js" type="text/javascript"></script>
<script type="text/javascript">
   window.onload = function () {
      InitSwfUpload();
   }

   function InitSwfUpload() {
      var swfuOption = {//swfupload选项
          upload_url: "/Handlers/UploadFile.ashx",//接收上传的服务端url
          flash_url: "/swfu/Flash/swfupload.swf",//swfupload压缩包解压后swfupload.swf的url
          button_placeholder_id: "swfu-placeholder",//
          file_types: "*.jpg;*.jpeg;*.gif;*.png;*.bmp;",//类型
          file_size_limit: "20480",//用户可以选择的文件大小，有效的单位有B、KB、MB、GB，若无单位默认为KB
          button_width: 215,//按钮宽度
          button_height: 45,//按钮高度
          button_text: '<span class="btn-txt">选择文件</span>',//按钮文字
          button_text_style: '.btn-txt{color: #666666;font-size:20px;font-family:"微软雅黑"}',button_text_top_padding: 6,button_text_left_padding: 65,button_image_url: "/swfu/img/swfu_bgimg.jpg",//按钮背景图片路径
          debug: true,//事件
          file_dialog_complete_handler: fileDialogComplete,upload_progress_handler: uploadProgress,upload_error_handler: uploadError,//文件上传出错
          upload_success_handler: uploadSuccess,//文件上传成功
          upload_complete_handler: uploadComplete//文件上传完成，在upload_error_handler或者upload_success_handler之后触发
        };
        var swfu = new SWFUpload(swfuOption); //初始化并将swfupload按钮替换swfupload占位符
    }


    function fileDialogComplete(selectedNum,queuedNum) {
       if (queuedNum > 0) {//选择并添加到上传队列的文件数大于0
           this.startUpload(); //开始上传
           this.setButtonDisabled(true); //禁用上传按钮
       }
    }


    function uploadProgress(file,curBytes,totalBytes) {
        var statusE = document.getElementById('swfu-upload-status'); //文件上传进度节点
        statusE.innerHTML = ['文件名：',file.name,'总尺寸：',totalBytes,'B已上传：','B进度：',parseInt((curBytes / totalBytes) * 100),'%'].join('');
     }


     //上传过程中出错
     function uploadError(file,errCode,msg) {
        statusE.innerHTML += ['文件[',']上传出错，出错代码：[',']，出错原因：',msg].join('');
     }

     //上传成功
     function uploadSuccess(file,data) {
        //statusE.innerHTML += ['文件[',']上传成功，服务器返回信息：',data].join('');
        var d = data.split(':');
        if (d[0] == 'ok') {
                document.getElementById('pimg').setAttribute('src',d[1]);  //将上传成功后的图片显示在pimg中
        }
      }

      //上传完成，无论上传过程中出错还是上传成功，都会触发该事件，并且在那两个事件后被触发
      function uploadComplete(file) {
          statusE.innerHTML += ['文件[',']结束上传'].join('');
          this.setButtonDisabled(false); //恢复上传按钮
      }
</script>

此时可以正常上传图片到服务器，当上传成功后图片会显示在pimg中。

4、接下来就是使用imageAreaSelect进行截图的配置

引用js

<!--jquery-->
<script src="../JS/jquery-1.9.1.js" type="text/javascript"></script>
    
<!--jquery easyui之imgareaselect相关引用-->
<link href="../jquery.imgareaselect-0.9.10/css/imgareaselect-default.css" rel="stylesheet" type="text/css" />
<script src="../jquery.imgareaselect-0.9.10/scripts/jquery.imgareaselect.pack.js" type="text/javascript"></script>

修改uploadSuccess方法

var pimgpath;      //用来存放图片路径
var x = 0;         //剪切框横坐标
var y = 0;         //剪切框纵坐标
var width = 0;     //剪切框宽度
var height = 0;    //剪切框高度

//上传成功
function uploadSuccess(file,data) {
     //statusE.innerHTML += ['文件[',data].join('');
     var d = data.split(':');
     if (d[0] == 'ok') {
          pimgpath = d[1];
          $('#pimg').attr('src',d[1]);
          this.setButtonDisabled(false); //恢复上传按钮
          $('#pimg').imgAreaSelect({
              maxWidth: 200,maxHeight: 150,handles: true,onSelectEnd: function (img,selection) {
                   x = selection.x1;
? ? ? ? ? ? ? ? ? ?y = selection.y1;
? ? ? ? ? ? ? ? ? ?width = selection.width;
? ? ? ? ? ? ? ? ? ?height = selection.height;
              }
          });
          $('#btnCut').click(function () {  //剪切按钮
? ? ? ? ? ? ? ? ?//alert('图片路径:'+pimgpath+';x='+x+';y='+y+';width='+width+';height:'+height);
? ? ? ? ? ? ? ? ?$.post('/Handlers/CutPhoto.ashx',{ 'pimgpath': pimgpath,'x': x,'y': y,'width': width,'height': height },function (data) {
? ? ? ? ? ? ? ? ? ? if (typeof (data) != undefined && data != null && data != '') {
? ? ? ? ? ? ? ? ? ? ? ? ?$('#smallimg').attr('src',data);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ?})
? ? ? ? ? });
     }
}

5、在Handlers文件夹中新建CutPhoto.ashx

public void ProcessRequest(HttpContext context)
{
      context.Response.ContentType = "text/plain";
      //(1)接收原图路径、以及Cut的矩形在大图上的左标与该矩形的宽高
      string pimgpath;
      int x;
      int y;
      int width;
      int height;
      pimgpath =context.Request.Form["pimgpath"];
      int.TryParse(context.Request.Form["x"],out x);
      int.TryParse(context.Request.Form["y"],out y);
      int.TryParse(context.Request.Form["width"],out width);
      int.TryParse(context.Request.Form["height"],out height);
      //(2)判断是否进行处理
      if (string.IsNullOrEmpty(pimgpath) || x < 0 || y < 0 || width < 0 || height < 0)
      {
          return;
      }
      //(3)准备处理
      using(Image img=Image.FromFile(context.Request.MapPath(pimgpath)))  //大图
      {
         using (Bitmap smallimg = new Bitmap(width,height))    //小图画布
         {
             using (Graphics g = Graphics.FromImage(smallimg))   //画笔
             {
                        //开始使用画笔将要截取的图片画在画布上
                        //param1-----------原图对象
                        //param2-----------从原图中画多大
                        //param3-----------画原图中哪部分
                        //param4-----------单位
                        g.DrawImage(img,new Rectangle(0,width,height),new Rectangle(x,y,GraphicsUnit.Pixel);
                        //新的文件名称、保存路径、物理路径、并根据物理路径存在于否创建物理路径
                        string newfilename = MyTool.GetMD5(smallimg)+Path.GetExtension(pimgpath);
                        string newpath = "/Upload/" + DateTime.Now.ToString("yyyyMMdd");
                        string physicsnewpath = context.Request.MapPath(newpath);
                        MyTool.CreateDirectory(physicsnewpath);
                        //保存放件
                        string savepath = Path.Combine(physicsnewpath,newfilename);
                        smallimg.Save(savepath);
                        //返回其相对路径
                        context.Response.Write(newpath+"/"+newfilename);
                }
            }
        }
}

OK~~~~~~