要实现功能，上传图片时可以预览，因还有别的文字，所以并不只上传图片，实现与别的文字一起保存，当然上来先上传图片，然后把路径和别的文字一起写入数据库；同时为　图片生成缩略图，现只写上传图片方法，文字在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; 
 }

以下为前台代码：

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

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

推荐阅读：

ajax怎样提交form表单与实现文件上传

Ajax向后台传输json格式数据出现错误应如何处理