因工作需要,上传图片要增加MIME类型验证和生成较小尺寸的图片用于浏览。根据网上代码加以修改做出如下效果图:

前台代码如下:

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上传图片和生成缩略图以及图片预览</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>图片上传:
</td>
<td>
<input type="text" id="txtImgPath" class="easyui-textbox" runat="server" style="width: 235px;" />
<input type="button" id="btnPCImg" value="浏览..." onclick="showFileUp('FileUpload1')"
class="easyui-linkbutton btn" style="width: 106px;" />
<asp:FileUpload class="easyui-linkbutton btn" Style="display: none" ID="FileUpload1"
runat="server" onchange="apendtoText('txtImgPath',this)" />
<asp:Button class="easyui-linkbutton btn" ID="btnUpFile" runat="server" Text="上传图片"
OnClick="btnUpFile_OnClick" Width="106px" />
</td>
</tr>
<tr>
<td>图片预览:
</td>
<td>
<asp:Image ID="Image1" runat="server" />
<asp:TextBox ID="txtimg" Style="display: none;" runat="server" Height="20px"></asp:TextBox>
<asp:TextBox ID="oldimgpath" Style="display: none;" runat="server" Height="20px"></asp:TextBox>
</td>
</tr>
</table>
</form>
</body>
<script type="text/javascript">
/*
* 显示文件选择框
* id {String} 要显示的FileUp
*/
function showFileUp(id) {
$('#' + id).click();
}
/*
* FileUp控件值改变后将该控件的值赋给其他控件
* id {String} 接收值的控件ID
* obj {Object} FileUp控件
*/
function apendtoText(id, obj) {
$('#' + id).textbox('setText', $(obj).val());
}
</script>
</html>

后台代码如下:

         /// <summary>
/// 上传图片
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void btnUpFile_OnClick(object sender, EventArgs e)
{
if (FileUpload1.PostedFile.FileName != "")
{
if (FileUpload1.PostedFile.ContentLength <= )//只能上传小于或等于2MB的图片
{
FileExtension[] fe = { FileExtension.Gif, FileExtension.Jpg, FileExtension.Png };//允许的图片格式
if (FileValidation.IsAllowedExtension(FileUpload1, fe))
{
//}
//if (newFileExtensions == ".jpg" || newFileExtensions == ".gif" || newFileExtensions == ".bmp" || newFileExtensions == ".png")//直接使用文件后缀检查是否为允许类型
//{
string sfilename = FileUpload1.PostedFile.FileName;
int sfilenamehz = sfilename.LastIndexOf(".", StringComparison.Ordinal);
string newFileExtensions = sfilename.Substring(sfilenamehz).ToLower();
string pa = "uploadfiles/" + DateTime.Now.Year + "-" + DateTime.Now.Month + "/";//获取当前年份和月份作为文件夹名
if (!Directory.Exists("~/" + pa))//如不存在则创建文件夹
{
Directory.CreateDirectory(Server.MapPath("~/" + pa));
}
string newFileName = DateTime.Now.ToString("yyyyMMddHHmmss");
string uppath = "~/" + pa + newFileName + newFileExtensions; Stream oStream = FileUpload1.PostedFile.InputStream;
System.Drawing.Image oImage = System.Drawing.Image.FromStream(oStream); int oWidth = oImage.Width; //原图宽度
int oHeight = oImage.Height; //原图高度
int tWidth = ; //设置缩略图初始宽度
int tHeight = ; //设置缩略图初始高度 //按比例计算出缩略图的宽度和高度
if (oWidth >= oHeight)
{
tHeight = (int)Math.Floor(Convert.ToDouble(oHeight) * (Convert.ToDouble(tWidth) / Convert.ToDouble(oWidth)));
}
else
{
tWidth = (int)Math.Floor(Convert.ToDouble(oWidth) * (Convert.ToDouble(tHeight) / Convert.ToDouble(oHeight)));
} //生成缩略原图
Bitmap tImage = new Bitmap(tWidth, tHeight);
Graphics g = Graphics.FromImage(tImage);
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; //设置高质量插值法
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;//设置高质量,低速度呈现平滑程度
g.Clear(Color.Transparent); //清空画布并以透明背景色填充
g.DrawImage(oImage, new Rectangle(, , tWidth, tHeight), new Rectangle(, , oWidth, oHeight), GraphicsUnit.Pixel); string upfilepath2 = "~/" + pa + newFileName + "_m" + newFileExtensions; //缩略图为原图后缀增加_m用于区分
string oFullName = Server.MapPath(uppath);
string tFullName = Server.MapPath(upfilepath2); try
{
//保存图片
oImage.Save(oFullName);
tImage.Save(tFullName);
Image1.ImageUrl = upfilepath2;//将缩略图显示到前台Img控件
txtimg.Text = pa + newFileName + "_m" + newFileExtensions;//将文件地址赋予控件用于保存
}
catch (Exception ex)
{
throw new Exception("发生错误,保存失败!", ex);
}
finally
{
//释放资源
oImage.Dispose();
g.Dispose();
tImage.Dispose();
}
}
else
{
string fileType = string.Empty;
foreach (var fileExtension in fe)
{
if (!string.IsNullOrEmpty(fileType))
{
fileType += ",";
}
fileType += fileExtension;
}
Response.Write("<script>alert('文件格式被禁止,只支持" + fileType + "格式的图片')</script>");
}
}
else
{
Response.Write("<script>alert('文件大了,请修改大小,勿超过2MB')</script>");
}
}
}
enum FileExtension
{
Jpg = ,
Gif = ,
Png =
}
/// <summary>
/// 判断上传的文件的真实格式
/// </summary>
private class FileValidation
{
/// <summary>
/// 检查是否为允许的图片格式
/// </summary>
/// <param name="fu">上传控件</param>
/// <param name="fileEx">文件扩展名</param>
/// <returns></returns>
public static bool IsAllowedExtension(FileUpload fu, FileExtension[] fileEx)
{
int fileLen = fu.PostedFile.ContentLength;
byte[] imgArray = new byte[fileLen];
fu.PostedFile.InputStream.Read(imgArray, , fileLen);
MemoryStream ms = new MemoryStream(imgArray);
BinaryReader br = new BinaryReader(ms);
string fileclass = string.Empty;
try
{
byte buffer = br.ReadByte();
fileclass = buffer.ToString();
buffer = br.ReadByte();
fileclass += buffer.ToString();
}
catch //(Exception ex)
{
// ignored
}
br.Close();
ms.Close();
int num = ;
int.TryParse(fileclass, out num);
foreach (FileExtension fe in fileEx)
{
if (num == (int)fe)
return true;
}
return false;
}
}

C#上传图片和生成缩略图以及图片预览的更多相关文章

  1. PHP.24-TP框架商城应用实例-后台1-添加商品功能、钩子函数、在线编辑器、过滤XSS、上传图片并生成缩略图

    添加商品功能 1.创建商品控制器[C] /www.test.com/shop/Admin/Controller/GoodsController.class.php <?php namespace ...

  2. MVC4 上传图片并生成缩略图

    Views @using (Html.BeginForm("Create","img",FormMethod.Post, new { enctype = &qu ...

  3. 使用canvas实现图片预览、缩放(压缩)以及生成文件下载

    参考 https://www.runoob.com/html/html5-canvas.html https://www.cnblogs.com/yuanzhiguo/p/8288822.html h ...

  4. HTML5浏览器端图片预览&生成Base64

    本文主要介绍如何通过拖拽方式在浏览器端实现图片预览,并生成图片的Base64编码. 工具链接:图片转Base64. 首先介绍一下FileReader, FileReader对象允许浏览器使用File或 ...

  5. (干货)微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

  6. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  7. jquery实现上传图片及图片大小验证、图片预览效果代码

    jquery实现上传图片及图片大小验证.图片预览效果代码 jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture() ...

  8. vue-preview vue图片预览插件+缩略图样式

    一.安装 npm i vue-preview -S 二.main.js中  导入组件 //vue-preview 开始 import VuePreview from 'vue-preview'; // ...

  9. 微信小程序之上传图片和图片预览

    这几天一直负责做微信小程序这一块,也可以说是边做边学习吧,把自己做的微信小程序的一些功能分享出来,与大家探讨一下,相互学习相互进步. 先看下效果图 只写了一下效果样式的话希望大家不要太在意,下面马路杀 ...

随机推荐

  1. XML操作之Linq to Xml

    需要引用的命名空间:   using System.Xml.Linq; 常用的类:XDocument.XElement.XAttribute 创建 XDocument对象. XDocument.Loa ...

  2. Clarkson不等式

  3. 【转】来自《轻松scrum之旅》的敏捷开发总结

    敏捷开发的核心价值观是,软件开发最重要的是给用户提供有价值的.可以工作的软件.如何保证提供有价值的软件,是通过反馈机制来完成的.这一点,我们体会很深.自从采用敏捷开发以后,我们比以前更有意识地希望得到 ...

  4. Oracle12c功能增强 新特性之管理功能的增强

    1.    数据文件在线重命名和迁移 不想先前的版本号.在Oracle12cR1中,数据文件的迁移或重命名不再要求一系列的步骤,比如:将表空间至于仅仅读模式,然后数据文件逻辑等操作.在12cR1中.数 ...

  5. Android蓝牙操作笔记

    蓝牙是一种支持设备短距离传输数据的无线技术.android在2.0以后提供了这方面的支持. 从查找蓝牙设备到能够相互通信要经过几个基本步骤(本机做为服务器): 1.设置权限 在manifest中配置 ...

  6. 06---Java基础、面向对象

    一.Java基础 1.Java概述 Java语言特点:                     简单性.解释性.面向对象.高性能.分布式处理                     多线程.健壮性.动 ...

  7. Java基础 Day14 泛型

    //为什么要使用泛型 //1.解决元素存储的安全性的问题 //2.解决获取元素时,须要类型转换的问题 //未使用泛型 package org.tizen.test; import java.util. ...

  8. Lipo Error!! can't open input file

    参考文章:http://stackoverflow.com/questions/17348912/lipo-error-cant-open-input-file I got it to Work, i ...

  9. 2、netlink简介

    Netlink 是一种特殊的 socket,它是 Linux 所特有的,类似于 BSD 中的AF_ROUTE 但又远比它的功能强大,目前在最新的 Linux 内核(2.6.14)中使用netlink ...

  10. MySQL提供的错误日志中的错误级别一共有3个分别为:

    ERROR_LEVEL-->错误级别 WARNING_LEVEL-->警告级别 INFORMATION_LEVEL-->信息级别