AJAX實現圖片預覽與上傳及產生縮圖的方法_AJAX相關

要實現功能，上傳圖片時可以預覽，因還有別的文字，所以並不只上傳圖片，實現與別的文字一起儲存，當然上來先上傳圖片，然後把路徑和別的文字一起寫入資料庫；同時為　圖片產生縮圖，現唯寫上傳圖片方法，文字在ajax裡直接傳參數就可以了，若要上傳多圖，修改一下就可以了。

借鑒了網上資料，自己寫了一下，並不需要再新加頁面，只在一個頁面裡就OK啦。

JS代碼：

//ajax儲存資料，後台方法裡實現此方法 function SaveData() {　     filename = document.getElementById("idFile").value;     result =test_test_aspx.SaveData(filename).value;     if (result) {       alert("儲存成功！");          }     return false;   }  //實現預覽功能   function DrawImage(ImgD) {     var preW = 118;     var preH = 118;     var image = new Image();     image.src = ImgD.src;     if (image.width > 0 && image.height > 0) {       flag = true;       if (image.width / image.height >= preW/ preH) {         if (image.width > preW) {           ImgD.width = preW;           ImgD.height = (image.height * preW) / image.width;         }         else {           ImgD.width = image.width;           ImgD.height = image.height;         }         ImgD.alt = image.width + "x" + image.height;       }       else {         if (image.height > preH) {           ImgD.height = preH;           ImgD.width = (image.width * preH) / image.height;         }         else {           ImgD.width = image.width;           ImgD.height = image.height;         }         ImgD.alt = image.width + "x" + image.height;       }     }   } //當idFile內容改變時   function FileChange(Value) {     flag = false;     document.getElementById("showImg").style.display = "none";        document.getElementById("idImg").width = 10;     document.getElementById("idImg").height = 10;     document.getElementById("idImg").alt = "";     document.getElementById("idImg").src = Value;   } 

以下為前台代碼：

<div class="cbs"> <div class="l"><label>圖片:</label></div> <div>   <input id="idFile" name="pic" type="file" runat="server" onchange="FileChange(this.value);" /> </div>     </div>      <div class="cbs"> <div class="l"><label>預覽:</label></div> <div>   <img id="idImg" height="0" width="0" src="" alt="" onload="DrawImage(this);" /> //實現預覽   <img id="showImg" width="118" height="118" alt="" runat="server" style="display:none"/>  //加這個主要是為了實現查看時顯示圖片，因為上面的（idImg）加上runat="server"　報錯，如有好的方法可以留言     </div> </div>    

以下為AJAX方法：

[Ajax.AjaxMethod()] public bool SaveData(string fileNamePath) {   string serverFileName = "";   string sThumbFile = "";     string sSavePath = "~/Files/";   int intThumbWidth = 118;   int intThumbHeight = 118;   string sThumbExtension = "thumb_";   try   {  //擷取要儲存的檔案資訊  FileInfo file = new FileInfo(fileNamePath);  //獲得副檔名  string fileNameExt = file.Extension;   //驗證合法的檔案  if (CheckFileExt(fileNameExt))  {    //產生將要儲存的隨機檔案名稱    string fileName = GetFileName() + fileNameExt;    //檢查儲存的路徑 是否有/結尾    if (sSavePath.EndsWith("/") == false) sSavePath = sSavePath + "/";     //按日期歸類儲存    string datePath = DateTime.Now.ToString("yyyyMM") + "/" + DateTime.Now.ToString("dd") + "/";    if (true)    {  sSavePath += datePath;    }    //獲得要儲存的檔案路徑    serverFileName = sSavePath + fileName;    //物理完整路徑    string toFileFullPath = HttpContext.Current.Server.MapPath(sSavePath);     //檢查是否有該路徑 沒有就建立    if (!Directory.Exists(toFileFullPath))    {  Directory.CreateDirectory(toFileFullPath);    }     //將要儲存的完整檔案名稱     string toFile = toFileFullPath + fileName;     ///建立WebClient執行個體    WebClient myWebClient = new WebClient();    //設定windows網路安全認證     myWebClient.Credentials = CredentialCache.DefaultCredentials;       //要上傳的檔案    FileStream fs = new FileStream(fileNamePath, FileMode.Open, FileAccess.Read);    //FileStream fs = OpenFile();    BinaryReader r = new BinaryReader(fs);    //使用UploadFile方法可以用下面的格式    //myWebClient.UploadFile(toFile, "PUT",fileNamePath);    byte[] postArray = r.ReadBytes((int)fs.Length);    Stream postStream = myWebClient.OpenWrite(toFile, "PUT");    if (postStream.CanWrite)    {  postStream.Write(postArray, 0, postArray.Length);    }    postStream.Close();    //以上為原圖    try    {  //原圖載入    using (System.Drawing.Image sourceImage = System.Drawing.Image.FromFile(System.Web.HttpContext.Current.Server.MapPath(serverFileName)))  {    //原圖寬度和高度     int width = sourceImage.Width;    int height = sourceImage.Height;    int smallWidth;    int smallHeight;     //擷取第一張繪製圖的大小,(比較 原圖的寬/縮圖的寬 和 原圖的高/縮圖的高)     if (((decimal)width) / height <= ((decimal)intThumbWidth) / intThumbHeight)    {   smallWidth = intThumbWidth;   smallHeight = intThumbWidth * height / width;    }    else    {   smallWidth = intThumbHeight * width / height;   smallHeight = intThumbHeight;    }     //判斷縮圖在當前檔案夾下是否同名稱檔案存在    int file_append = 0;    sThumbFile = sThumbExtension + System.IO.Path.GetFileNameWithoutExtension(fileName) + fileNameExt;     while (System.IO.File.Exists(System.Web.HttpContext.Current.Server.MapPath(sSavePath + sThumbFile)))    {   file_append++;   sThumbFile = sThumbExtension + System.IO.Path.GetFileNameWithoutExtension(fileName) + file_append.ToString() + fileNameExt;    }    //縮圖儲存的絕對路徑     string smallImagePath = System.Web.HttpContext.Current.Server.MapPath(sSavePath) + sThumbFile;     //建立一個圖板,以最小等比例壓縮大小繪製原圖     using (System.Drawing.Image bitmap = new System.Drawing.Bitmap(smallWidth, smallHeight))    {   //繪製中間圖    using (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(Color.Black); g.DrawImage( sourceImage, new System.Drawing.Rectangle(0, 0, smallWidth, smallHeight), new System.Drawing.Rectangle(0, 0, width, height), System.Drawing.GraphicsUnit.Pixel );   }   //建立一個圖板,以縮圖大小繪製中間圖    using (System.Drawing.Image bitmap1 = new System.Drawing.Bitmap(intThumbWidth, intThumbHeight))   { //繪製縮圖  using (System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap1)) {   //高清,平滑    g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High;   g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;   g.Clear(Color.Black);   int lwidth = (smallWidth - intThumbWidth) / 2;   int bheight = (smallHeight - intThumbHeight) / 2;   g.DrawImage(bitmap, new Rectangle(0, 0, intThumbWidth, intThumbHeight), lwidth, bheight, intThumbWidth,intThumbHeight, GraphicsUnit.Pixel);   g.Dispose();   bitmap1.Save(smallImagePath, System.Drawing.Imaging.ImageFormat.Jpeg);    return true;    }   }    }  }    }    catch    {  //出錯則刪除   System.IO.File.Delete(System.Web.HttpContext.Current.Server.MapPath(serverFileName));  return false;    }  }  else  {    return false;  }   }   catch (Exception e)   {  return false;   } } /// <summary> /// 檢查是否為合法的上傳檔案 /// </summary> /// <param name="_fileExt"></param> /// <returns></returns> private bool CheckFileExt(string _fileExt) {   string[] allowExt = new string[] { ".gif", ".jpg", ".jpeg" };   for (int i = 0; i < allowExt.Length; i++)   {  if (allowExt[i] == _fileExt) { return true; }   }   return false;  }    //產生隨機數檔案名稱 public static string GetFileName() {   Random rd = new Random();   StringBuilder serial = new StringBuilder();   serial.Append(DateTime.Now.ToString("yyyyMMddHHmmssff"));   serial.Append(rd.Next(0, 999999).ToString());   return serial.ToString();  } 

以上就是小編為大家帶來的AJAX實現圖片預覽與上傳及產生縮圖的方法的全部內容了，希望對大家有所協助，多多支援雲棲社區~