下面小编就为大家带来一篇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实现图片预览与上传及生成缩略图的方法的全部内容了,希望对大家有所帮助,多多支持编程学习网~
沃梦达教程
本文标题为:AJAX实现图片预览与上传及生成缩略图的方法
基础教程推荐
猜你喜欢
- 解决ajax的delete、put方法接收不到参数的问题方法 2023-02-23
- 深入浅析Jsonp解决ajax跨域问题 2022-12-28
- 分页技术原理与实现之无刷新的Ajax分页技术(三) 2023-01-20
- vue的 Mixins (混入) 2023-10-08
- 第7天:CSS入门 2022-11-04
- 关于 css:WebKit (iPad) CSS3: 背景过渡闪烁 2022-09-21
- ECSHOP中实现ajax弹窗登录功能 2023-01-31
- ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15
- Vue+WebSocket实现在线聊天 2023-10-08
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽) 2023-02-01