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实现图片预览与上传及生成缩略图的方法的全部内容了，希望对大家有所帮助，多多支持我们~