用Flash控件上傳圖片與Ajax請求服務器截取圖片

時間 2020-07-18

標籤 flash 控件上傳圖片 ajax 請求服務器截取欄目 Flash 简体版

原文原文鏈接

  
  
  
  
   
   
   
   首先要把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_p_w_picpath_url: "/SWFUpload/p_w_picpaths/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, width, height), 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: str[1] }, 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>