用Flash控件上传图片与Ajax请求服务器截取图片

发布时间：2020-12-15 18:18:30 所属栏目：百科来源：网络整理

导读：首先要把JqueryUI里面的JS文件与CSS样式给放到项目中的目录里面，建一个Web应用程序把下面的给放到head标签里面 link?href= "../Css/jquery-ui-1.8.2.custom.css" ?rel= "stylesheet" ?type= "text/css" ?/? ????link?href= "../Css/default.css" ?rel= "sty

 
 
首先要把JqueryUI里面的JS文件与CSS样式给放到项目中的目录里面，建一个Web应用程序把下面的给放到<head>标签里面
 
 

<link?href="../Css/jquery-ui-1.8.2.custom.css"?rel="stylesheet"?type="text/css"?/>?
  
  ????<link?href="../Css/default.css"?rel="stylesheet"?type="text/css"?/>?
  
  ????<meta?http-equiv="X-UA-Compatible"?content="IE=EmulateIE7"?/>?
  
  ????<script?type="text/javascript"?src="/SWFUpload/swfupload.js"></script>?
  
  ????<script?type="text/javascript"?src="/SWFUpload/handlers.js"></script>?
  
  ????<script?src="js/jquery-1.7.2.js"?type="text/javascript"></script>?
  
  ????<script?src="../SWFUpload/jquery-ui-1.8.2.custom.min.js"?type="text/javascript"></script>?

<meta?http-equiv="X-UA-Compatible"?content="IE=EmulateIE7"?/> ： 这个是IE里面的兼容问题，如果说是IE7以上的版本浏览器会在搜索框后面，有一个像被破坏的图标，一点就会让浏览器兼容Flash 控件了。 其余的依次引入就可以了。

 
 
<script?type="text/javascript">?
  
  ???????var?swfu;?
  
  ???????window.onload?=?function?()?{ 
  
  
???????????swfu?=?new?SWFUpload({ //这个在Jquery文档中有这个方法

  
  
???????????????//?Backend?Settings?  //注意这是要请求的一般处理程序后面加了一个问号action=up。在后面会详细说到的
 

  
   ???????????????upload_url:?"/ashx/CutHeaderPhoto.ashx?action=up",
 

  
   ???????????????post_params:?{?
 

 
 

???????????????????"ASPSESSID":?"<%=Session.SessionID?%>"?
    
  
  ???????????????},?
    
  
  ???????????????//?File?Upload?Settings?
    
  
  ???????????????file_size_limit:?"2?MB",//说上传的文件规定大小
    
  
  ???????????????file_types:?"*.jpg;*.gif",//上传文件的格式
    
  
  ???????????????file_types_description:?"JPG?Images",//上传文件的类型
    
  
  ???????????????file_upload_limit:?0,????//?Zero?means?unlimited?
    
  
  ???????????????//?Event?Handler?Settings?-?these?functions?as?defined?in?Handlers.js?
    
  
  ???????????????//??The?handlers?are?not?part?of?SWFUpload?but?are?part?of?my?website?and?control?how?
    
  
  ???????????????//??my?website?reacts?to?the?SWFUpload?events.?
    
  
  ???????????????swfupload_preload_handler:?preLoad,?
    
  
  ???????????????swfupload_load_failed_handler:?loadFailed,?
    
  
  ???????????????file_queue_error_handler:?fileQueueError,?
    
  
  ???????????????file_dialog_complete_handler:?fileDialogComplete,?
    
  
  ???????????????upload_progress_handler:?uploadProgress,?
    
  
  ???????????????upload_error_handler:?uploadError,?
    
  
  ???????????????upload_success_handler:?ShowData,?
    
  
  ???????????????upload_complete_handler:?uploadComplete,?
    
  
  ???????????????//?Button?settings?
    
  
  ???????????????button_image_url:?"/SWFUpload/images/XPButtonNoText_160x22.png",?
    
  
  ???????????????button_placeholder_id:?"spanButtonPlaceholder",?
    
  
  ???????????????button_width:?160,?
    
  
  ???????????????button_height:?22,?
    
  
  ???????????????button_text:?'<span?class="button">择上传的图片<span?class="buttonSmall">(2MB?Max)</span></span>',?
    
  
  ???????????????button_text_style:?'.button?{?font-family:?Helvetica,?Arial,?sans-serif;?font-size:?14pt;?}?.buttonSmall?{?font-size:?10pt;?}',?
    
  
  ???????????????button_text_top_padding:?1,?
    
  
  ???????????????button_text_left_padding:?5,?
    
  
  ???????????????//?Flash?Settings?
    
  
  ???????????????flash_url:?"/SWFUpload/swfupload.swf",?//?Relative?to?this?file?
    
  
  ???????????????flash9_url:?"/SWFUpload/swfupload_FP9.swf",?//?Relative?to?this?file?
    
  
  ???????????????custom_settings:?{?
    
  
  ???????????????????upload_target:?"divFileProgressContainer"?
    
  
  ???????????????},?
    
  
  ???????????????//?Debug?Settings?
    
  
  ???????????????debug:?false?
    
  
  ???????????});?
    
  
  ???????}?

 
 
 //处理图片上传和截取图片的一般处理程序，在前面说到了为什么要定义一个全局的 [var str] 当上传图片成功的 

  
  
 //的时候会把图片存到磁盘上，可是当截取的时候还还要取出图片，当执行上传图片的时候， string?fileName?=?Path.GetFileName(file.FileName);这fileName为当前上传的图片， 当截取图片的时候，再一次执行这个一般处理程序fileName里面这时就为空了，所以取不到值。所以在前台前 定义一个变量来保存上传成功的图片，当执行图片截取的时候，fileName里面就有了上次成功传的图片了。  //取到文件的提交方式，是上传文件还是截取文件?
     
     
???????????string?action=context.Request["action"];//不明确是上传图片还截取图片?
      
      ???????????//当这个action==up的时候说明是上传图片?
      
      ???????????if?(action?==?"up")?
      
      ???????????{??
      
      ???????????????//创建一个单独访问文件的对象，FileData是Jquery封装好的?
      
      ???????????????HttpPostedFile?file=context.Request.Files["Filedata"];?
      
      ???????????????//返回字符串file的路径和扩展名?
      
      ???????????????string?fileName?=?Path.GetFileName(file.FileName);?
      
      ???????????????//得到这个字符串file的扩展名?
      
      ???????????????string?fileExt?=?Path.GetExtension(fileName);?
      
      ???????????????//判断图片的后缀名?
      
      ???????????????if?(fileExt?==?".jpg")?
      
      ???????????????{?
      
      ???????????????????//用Image来创建一个对象，用流的方式输出这个图片file.InputStream?
      
      ???????????????????using?(Image?img?=?Image.FromStream(file.InputStream))?
      
      ???????????????????{?
      
      ???????????????????????//得到图片的物理路径，把图片保存起来?
      
      ???????????????????????file.SaveAs(context.Server.MapPath("/UploadImages/"+fileName));?
      
      ???????????????????????//得到图片的大小?
      
      ???????????????????????context.Response.Write("ok:/UploadImages/"+fileName+":"+img.Width+":"+img.Height);?
      
      ???????????????????}?
      
      ???????????????}?
      
      ???????????????????//是cut就是说明是截取图片?
      
      ???????????????else?if?(action?==?"cut"){??
      
      ???????????????//来取到x,y,width,height?
      
      ???????????????????int?x=Convert.ToInt32(context.Request.Form["x"]);?
      
      ???????????????????int?y=Convert.ToInt32(context.Request.Form["y"]);?
      
      ???????????????????int?width=Convert.ToInt32(context.Request.Form["width"]);?
      
      ???????????????????int?height=Convert.ToInt32(context.Request.Form["height"]);?
      
      ???????????????????string?imgSrc?=?context.Request.Form["imgSrc"];?
      
      ???????????????????//创建一个画板对象?
      
      ???????????????????using?(Bitmap?map?=new?Bitmap(width,?height))?
      
      ???????????????????{??
      
      ???????????????????????//创建一个画笔,而且是在这Bitmap上面画的所以要用Graphics.FromImage(map)?
      
      ???????????????????????using?(Graphics?g?=?Graphics.FromImage(map))?
      
      ???????????????????????{?
      
      ???????????????????????????//创建一个图片的对象，取到这个要在那里显示截取的图上?
      
      ???????????????????????????using?(Image?img?=?Image.FromFile(context.Request.MapPath(imgSrc)))?
      
      ???????????????????????????{?
      
      ???????????????????????????????//用这个画笔来取到这个要画的图片的大小和位置?
      
      ???????????????????????????????g.DrawImage(img,?new?Rectangle(0,?0,?width,?height),?new?Rectangle(x,?y,?GraphicsUnit.Pixel);?
      
      ???????????????????????????????//给截取的图片重新定义一个名字给存起来?
      
      ???????????????????????????????string?newName?=?Guid.NewGuid().ToString().Substring(0,10);?
      
      ???????????????????????????????map.Save(context.Server.MapPath("/UploadImages/"+newName+".jpg"));?
      
      ???????????????????????????????context.Response.Write(context.Server.MapPath("/UploadImages/"?+?newName?+?".jpg"));?
      
      ???????????????????????????}?
      
      ???????????????????????}?
      
      ???????????????????}?
      
      ???????????????}?
      
      ???????????}?
     
     
 

  
  
?????  //定义一个全局的变量来接收服务器端传回的数据。 //上传图片
 

  
  ?var?str;?

  
  ???????//参数为文件，有服务器端的数据?

  
  ???????function?ShowData(file,?serverData)?{?

  
  ???????????str?=?serverData.split(":");?//把这个数据从冒号截取?

  
  ???????????if?(str[0]?==?"ok")?{?//当这个?数据等于Ok的时候?

  
  ???????????//在这个层里面显示图片内容，定义图片的宽和高?

  
  ???????????????$("#ImgContentId").css("backgroundImage",?"url("?+?str[1]?+?")").css("width",?str[2]?+?"px").css("height",?str[3]?+?"px");?

  
  ???????????}?

  
  ???????}?

 
 
//定义一个方法匿名方法? //这里是截取图片的位置大小，
  
  ???????$(function?()?{?
  
  ???????????//截取图片里面??要引用一个draggable和resizable这两个是Jquery定义好的?
  
  ???????????$("#CutPhotoId").draggable({?containment:?'parent'?}).resizable({?containment:?'parent'?});?
  
  ???????????//点击这个按钮就截取图片?
  
  ???????????$("#btnCutPhotoId").click(function?()?{?
  
  ???????????????//取到这个截取图片层的x,y轴与宽和高?
  
  ???????????????var?y?=?$("#CutPhotoId").offset().top?-?$("#ImgContentId").offset().top;?
  
  ???????????????var?x?=?$("#CutPhotoId").offset().left?-?$("#ImgContentId").offset().left;?
  
  ???????????????var?width?=?$("#CutPhotoId").width();?
  
  ???????????????var?height?=?$("#CutPhotoId").height();?
  
  ???????????????//用Ajax的异步请求?post提交数据?
  
  ???????????????$.post("/ashx/CutHeaderPhoto.ashx",?{?"action":?"cut",?"x":?parseInt(x),?"y":?parseInt(y),?"width":?parseInt(width),?"height":?parseInt(height),?imgSrc='#'" /span>function?(data)?{?
  
  ???????????????????$("#imgSrcId").attr("src",data);?
  
  ???????????????});?
  
  ???????????});?
  
  ???????});?

 
 
<form?id="form1"?runat="server"> //这是表单
  
  ???<div?id="content">?
  
  ???????<div?id="swfu_container"?style="margin:?0px?10px;">?
  
  ???????????<div>?
  
  ???????????????<span?id="spanButtonPlaceholder"></span>?
  
  ???????????</div>?
  
  ???????????<div?id="divFileProgressContainer"?style="height:?75px;">?
  
  ???????????</div>?
  
  ???????????<div?id="ImgContentId"?style="width:?300px;?height:?300px">?
  
  ???????????????<div?id="CutPhotoId"?style="width:?100px;?height:?100px;?border:?1px?solid?red">?
  
  ???????????????</div>?
  
  ???????????</div>?
  
  ???????????<input?type="button"?value="截取头像"?id="btnCutPhotoId"?/>&nbsp;&nbsp;?
  
  ???????????<img?id="imgSrcId"?alt="美图"/>?
  
  ???????</div>?
  
  ???</div>?
  
  ???</form>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!