精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
AJAX如何实现图片预览与上传及生成缩略图的方法
这篇文章将为大家详细讲解有关AJAX如何实现图片预览与上传及生成缩略图的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联主要从事成都网站制作、做网站、外贸营销网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务灵宝,十载网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
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;
}以下为前台代码：
//实现预览
//加这个主要是为了实现查看时显示图片，因为上面的（idImg）加上runat="server" 报错，如有好的方法可以留言
以下为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;
}
}
///
/// 检查是否为合法的上传文件
///
///
///
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
ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，可以通过在后台与服务器进行少量数据交换，使网页实现异步更新。
关于“AJAX如何实现图片预览与上传及生成缩略图的方法”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
当前文章：AJAX如何实现图片预览与上传及生成缩略图的方法
分享地址：http://cdkjz.cn/article/jdsjpg.html
