要實現功能,上傳圖片時可以預覽,因還有別的文字,所以並不只上傳圖片,實現與別的文字一起保存,當然上來先上傳圖片,然後把路徑和別的文字一起寫入數據庫;同時為 圖片生成縮略圖,現只寫上傳圖片方法,文字在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實現圖片預覽與上傳及生成縮略圖的方法的全部內容了,希望對大家有所幫助,多多支持~