AJAX method to implement image preview and upload and generate thumbnails-JS Tutorial-php.cn

The editor below will bring you an articleAJAXHow to preview and upload images and generate thumbnails. The editor thinks it's pretty good, so now I'll share the source code such as ajax with you, and also give you a reference. Let’s follow the editor to see AJAXHow to preview and upload images and generate thumbnails

To implement the function, you can preview when uploading images, because there are other texts, so Instead of just uploading pictures, you can save them together with other text. Of course, upload the pictures first, and then write the path and other text into the database. At the same time, generate thumbnails for the pictures. Now you only write the method of uploading pictures, and the text is directly in ajax. Just pass the parameters. If you want to upload multiple images, just modify it.

I learned from online information and wrote it myself. There is no need to add a new page, just one page is fine.

JS code:

//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; 
  }

Copy after login

The following is the front-end code:

<p class="cbs"> 
<p class="l"><label>图片:</label></p> 
<p> 
  <input id="idFile" name="pic" type="file" runat="server" onchange="FileChange(this.value);" /> 
</p> 
    </p>  
    <p class="cbs"> 
<p class="l"><label>预览:</label></p> 
<p> 
  <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"　报错，如有好的方法可以留言     
</p> 
</p>

Copy after login

The following are AJAX methods:

[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(); 
 
}

Copy after login

The above is the entire content of the method of AJAX implementation of image preview, upload and thumbnail generation brought to you by the editor. I hope it will be helpful to everyone. Please support the PHP Chinese website!

Related recommendations:

jquery and iframe make an ajax upload effect example sharing

Instance sharingAjax upload File progress bar Codular

Ajax upload image and preview function implementation method

The above is the detailed content of AJAX method to implement image preview and upload and generate thumbnails. For more information, please follow other related articles on the PHP Chinese website!