이미지 미리보기를 구현하고 썸네일을 업로드 및 생성하는 AJAX 방법-JS 튜토리얼-php.cn

이미지 미리보기를 구현하고 썸네일을 업로드 및 생성하는 AJAX 방법

韦小宝

풀어 주다： 2017-12-30 16:25:36

원래의

2298명이 탐색했습니다.

아래 편집기에서 AJAX이미지를 미리 보고 업로드하고 썸네일을 생성하는 방법에 대한 기사를 가져올 것입니다. 에디터가 꽤 괜찮다고 생각해서 이제 ajax 및 기타 소스 코드를 공유하고 참고 자료도 제공하겠습니다. AJAX이미지 미리보기 구현 방법과 썸네일 업로드 및 생성 방법

기능 구현을 위해서는 이미지 업로드 시 미리보기를 할 수 있으니, 다른 텍스트도 있기 때문에 이미지만 업로드하는 것이 아니라 구현하면 됩니다. other 물론, 먼저 이미지를 업로드한 다음 동시에 데이터베이스에 경로와 다른 텍스트를 작성하고, 이제 이미지 업로드 방법만 작성합니다. 여러 장의 사진을 업로드하고 수정하려면 ajax에서 매개변수로 직접 전달하세요.

온라인 정보를 바탕으로 직접 작성했습니다. 페이지를 새로 추가할 필요도 없고 한 페이지만 있어도 됩니다.

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

로그인 후 복사

다음은 프런트 엔드 코드입니다.

<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>

로그인 후 복사

다음은 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 구현에 대한 모든 내용을 제공합니다. PHP 중국어 웹사이트를 지원해 주세요.

관련 권장사항:

jquery 및 iframe을 사용하여 ajax 업로드 효과 예제 공유

Ajax 업로드 파일 진행률 표시줄 공유 예제 Codular

Ajax 업로드 이미지 및 미리보기 기능 구현 방법

위 내용은 이미지 미리보기를 구현하고 썸네일을 업로드 및 생성하는 AJAX 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!