AJAX-Methode zum Implementieren der Bildvorschau und zum Hochladen und Generieren von Miniaturansichten-js-Tutorial-php.cn

Der unten stehende Herausgeber bringt Ihnen einen Artikel über AJAX-Methoden zum Vorschaubild, Hochladen von Bildern und Generieren von Miniaturansichten. Der Herausgeber findet es ziemlich gut, deshalb teile ich jetzt den Quellcode von Ajax mit Ihnen und gebe Ihnen auch eine Referenz. Folgen wir dem Editor, um zu sehen, wie AJAX die Bildvorschau implementiert, Miniaturansichten hochlädt und generiert

Um die Funktion zu implementieren, können Sie beim Hochladen eine Vorschau des Bildes anzeigen, da es anderen Text gibt, also stattdessen Wenn Sie nur Bilder hochladen, können Sie diese natürlich auch zuerst hochladen und dann den Pfad und den anderen Text in die Datenbank schreiben. Jetzt schreiben Sie nur noch die Bilder Methode zum Hochladen von Bildern, und der Text erfolgt direkt in Ajax. Wenn Sie mehrere Bilder hochladen möchten, ändern Sie ihn einfach.

Ich habe auf Online-Informationen zurückgegriffen und sie selbst geschrieben. Es ist nicht nötig, eine neue Seite hinzuzufügen, nur eine Seite ist in Ordnung.

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

Nach dem Login kopieren

Das Folgende ist der 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>

Nach dem Login kopieren

Die folgenden AJAX-Methoden sind:

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

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt der AJAX-Implementierung der Bildvorschau, des Hochladens und der Miniaturbildgenerierung, die Ihnen der Herausgeber zur Verfügung gestellt hat. Ich hoffe, dass er für alle hilfreich ist PHP chinesische Website!

Verwandte Empfehlungen:

jquery und iframe erzeugen einen Ajax-Upload-Effekt, Beispielfreigabe

Beispielfreigabe Ajax-Upload Dateifortschrittsbalken Codular

Ajax-Methode zum Hochladen von Bildern und Vorschaufunktionen

Das obige ist der detaillierte Inhalt vonAJAX-Methode zum Implementieren der Bildvorschau und zum Hochladen und Generieren von Miniaturansichten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!