<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jquery.form.js" type="text/javascript"></script>
<style type="text/css">
#upload
{
height: 25px;
}
#upload input
{
float: left;
margin: 0 20px 0 0;
}
#upload img
{
width: 25px;
height: 25px;
float: left;
}
#preview
{
width: 300px;
margin: 10px 0 0 0;
}
#preview img
{
width: 150px;
height: 150px;
}
</style>
<script type="text/javascript">
$(function () {
var wait = $("<img src=\"images/loading.gif\" alt=\"正在上传\"/>");
$("#uploadImage").change(function () {
var isIE = /msie/i.test(navigator.userAgent) && !window.opera; //检测是否为IE
var fileSize = 0;
var filePath = this.value;
//是IE并且检测不到有文件
if (isIE && !this.files) {
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
var file = fileSystem.GetFile(filePath);
fileSize = file.Size;
} else {
fileSize = this.files[0].size;
}
var type = filePath.toString().substring(filePath.lastIndexOf('.')).toLocaleLowerCase();
if (type != ".jpg" && type != ".jpeg" && type != ".gif" && type != ".bmp" && type != ".png") {
alert("请选择图片文件!");
return false;
}
var size = fileSize / 1024;
if (size > 10000) {
alert("图片不能大于10M");
return false;
}
$("#form1").ajaxSubmit({
url: 'UploadImage.ashx',
beforeSubmit: function () {
$("#upload").append(wait); //显示缓冲状态
$("#upload img").css("display", "inline");
},
success: function (data) {
$("#upload img").fadeOut(2000);//上传成功后隐藏缓冲状态
if (data != "上传失败") {
if ($.browser.msie) {
//ie9可能出现兼容问题
data = data.replace("<pre>", "").replace("</pre>", "");
}
$("#previewImage").attr("src", "uploadImages/" + data).hide().fadeIn(2000);
}
else {
alert("上传失败,请检查上传的是否为图片");
}
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server" method="post" enctype="multipart/form-data">
<!-- 这里必须是 method="post" enctype="multipart/form-data" 否则失败-->
<div id="upload">
<input type="file" id="uploadImage" name="uploadImage" />
</div>
<div id="preview">
<img id="previewImage" src="images/noimage.jpg" alt="暂无图片" />
</div>
</form>
</body>
</html>
<%@ WebHandler Language="C#" Class="UploadImage" %>
using System;
using System.Web;
public class UploadImage : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/html";//如果是text/plain无法刷新图片
try
{
HttpPostedFile file = context.Request.Files[0];
if (file != null)
{
//再判断一次
if (file.ContentLength > 1024 * 1024 * 10)
{
context.Response.Write("上传失败");
return;
}
try
{
//上传图片的扩展名
string type = file.FileName.Substring(file.FileName.LastIndexOf('.')).ToLower();
//非图片文件,
if (type != ".jpg" && type != ".jpeg" && type != ".gif" && type != ".bmp" && type != ".png")
{
context.Response.Write("上传失败");
return;
}
//图片保存的文件夹路径
string path = context.Server.MapPath("~/uploadImages/");
//每天上传的图片一个文件夹
string folder = DateTime.Now.ToString("yyyyMMdd");
//如果文件夹不存在,则创建
if (!System.IO.Directory.Exists(path + folder))
{
System.IO.Directory.CreateDirectory(path + folder);
}
//保存图片的文件名
string saveName = Guid.NewGuid().ToString() + type;
//保存原图片
file.SaveAs(path + folder + "/" + "Original"+saveName);
//压缩图片,可修改大小,默认为150*150
Thumbnails(file.InputStream, path + folder + "/" + saveName, 150, 150);
//返回结果
context.Response.Write(folder + "/" + saveName);
}
catch
{
context.Response.Write("上传失败");
}
}
}
catch
{
context.Response.Write("上传失败");
}
}
public bool IsReusable
{
get
{
return false;
}
}
//生成缩略图函数
//顺序参数:源图文件流、缩略图存放地址、模版宽、模版高
//注:缩略图大小控制在模版区域内
public static void Thumbnails(System.IO.Stream fromFileStream, string fileSaveUrl, System.Double templateWidth, System.Double templateHeight)
{
//从文件取得图片对象,并使用流中嵌入的颜色管理信息
System.Drawing.Image myImage = System.Drawing.Image.FromStream(fromFileStream, true);
//缩略图宽、高
System.Double newWidth = myImage.Width;
System.Double newHeight = myImage.Height;
//宽大于模版的横图
if (myImage.Width >= myImage.Height)
{
if (myImage.Width > templateWidth)
{
//宽按模版,高按比例缩放
newWidth = templateWidth;
newHeight = myImage.Height * (newWidth / myImage.Width);
}
else
{
newWidth = templateWidth;
newHeight = templateHeight;
}//小图片变大
}
//高大于模版的竖图
else
{
if (myImage.Height >= templateHeight)
{
//高按模版,宽按比例缩放
newHeight = templateHeight;
newWidth = myImage.Width * (newHeight / myImage.Height);
}
else
{
newWidth = templateWidth;
newHeight = templateHeight;
}//小图片变大
}
//取得图片大小
System.Drawing.Size mySize = new System.Drawing.Size((int)newWidth, (int)newHeight);
//新建一个bmp图片
System.Drawing.Image bitmap = new System.Drawing.Bitmap(mySize.Width, mySize.Height);
//新建一个画板
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(System.Drawing.Color.White);
//在指定位置画图
g.DrawImage(myImage, new System.Drawing.Rectangle(0, 0, bitmap.Width, bitmap.Height),
new System.Drawing.Rectangle(0, 0, myImage.Width, myImage.Height),
System.Drawing.GraphicsUnit.Pixel);
//保存缩略图
bitmap.Save(fileSaveUrl, System.Drawing.Imaging.ImageFormat.Jpeg);
fromFileStream.Close();
g.Dispose();
myImage.Dispose();
bitmap.Dispose();
}
}
分享到:
相关推荐
图片上传,html页面,本地预览,后台前台页面代码都有
一个示例,可以上传图片,以二进制的形式存在数据库中,然后前台调出显示
web图片上传前台页面 weui
js html java servlet 前台接收base64数据后台转图片保存上传 全套代码 直接可以用
js 前台检查工具小集合 如检查字符串格式等。
网站图片上传及前台显示.pdf
处理前后台图片旋转问题,前台处理旋转图片展示问题。后台处理旋转图片处理后保存到服务器和数据库问题。
通过base64上传图片到服务器并读取图片。上传的图片一般都会保存在服务器的某一个目录里面,这次的笔记则是对着图片的上传和读取的。
Ajax 上传图片 前台后台都有 代码简单易懂 总共加起来不到80行
图片和文件上传包括前台和后台代码 支持手机移动web可以显示进度条。
批量上传图片,可一次性选择不超过20张图片,可删除其中不想上传的图片,点击“开始上传”后,即可将图片上传到服务器,点击“全部插入”即可将图片显示在前台页面中。有益初学者,对批量上传文件及图片加深理解并...
图片上传插件,可多文件上传和回显,可删除已上传图片,可进行拖拽上传。 springmvc接收传向后台的值方法 @RequestMapping("/admin/addImage.do") public ModelAndView handleRequest(HttpServletRequest request,...
批量上传图片,可一次性选择不超过20张图片,选择好后可以删除其中不想上传的图片,点击“开始上传”后,即可将图片上传到服务器,点击“全部插入”可把图片显示在前台的页面中。 http://bbs.ah580.com
利用ajaxupload组件实现的图片上传 1、在部署该工程时,要...4、该上传组件上传图片时,产生的临时文件的名称较长,建议不要去更改,否则前台的操作十分麻烦,而且不一定能成功 5、删除功能,利用的是jquery的ajax方法
这篇文章主要通过代码分析javascript实现图片上传前台页面,废话不多说了,直接贴代码了。 代码示例一: [removed] //检查图片的格式是否正确,同时实现预览 function setImagePreview(obj, localImagId, ...
针对原版前台页面进行了简单修改,图片上传后可以拖拽修改图片大小
android 图片及文字上传,可单张可多张,可绑定图片信息,还有图文信息,使用json传送,后台使用net编写,webservice
一个图片上传前台。AJAX人性化显示,需要自己实现控制台。
另外由于缓存资源的原因没有考虑上传按钮的添加,上传图片即上传,ajax为异步请求。 至于后台是C#没啥好看的,就是数据库插入。 后续更新成base64数据保存到数据库,直接base64转换成图片保存在服务器,数据库存储...
前台上传文件插件CKFinder,前台上传文件插件CKFinder