前几天课程设计时一个图片上传,并可以裁剪大小的小程序,挺实用的……运行效果图,源码都上传上来了!分享给大家,需要的下载使用!(VS2010)
运行效果图:
部分代码:
javascript代码:- <script type="text/javascript" src="js/jquery.pack.js"></script>
- <script type="text/javascript" src="js/jquery.Jcrop.pack.js"></script>
- <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
- <script type="text/javascript">
- $(function () { $('#oImage').Jcrop({ boxWidth: 520, boxHeight: 330, onChange: showCoords, onSelect: showCoords }); }); //当选择、改变选区时都执行showCoords函数
- function showCoords(c) {
- $("#txtX").val(c.x); //得到选中区域左上角横坐标
- $("#txtY").val(c.y); //得到选中区域左上角纵坐标
- $("#txtW").val(c.w); //得到选中区域的宽度
- $("#txtH").val(c.h); //得到选中区域的高度
- }
- function checkCoords() {
- var defaulturl = document.getElementById("oImage").src;
- defaulturl = defaulturl.substring(defaulturl.lastIndexOf("/") + 1);
- if (defaulturl == "default1.jpg") {
- alert("请上传图片");
- return false;
- }
- else {
- if (parseInt($('#txtH').val()) && parseInt($('#txtW').val())) {
- sendImg();
- return true;
- }
- else {
- alert("请设置裁剪区域");
- return false;
- }
- }
- };
- function sendImg() {
- var p = document.getElementById("oImage").src;
- var x = document.getElementById("txtX").value;
- var y = document.getElementById("txtY").value;
- var w = document.getElementById("txtW").value;
- var h = document.getElementById("txtH").value;
- var ow = 222;
- var oh = 300;
- var rate = w / h;
- var s = "tupian/userimage/";
- if (rate > 1)//选区的宽大于高
- {
- document.getElementById("imgCreat").width = ow;
- document.getElementById("imgCreat").height = ow / rate;
- }
- else if (rate < 1) //选区的高大于宽
- {
- document.getElementById("imgCreat").width = oh * rate;
- document.getElementById("imgCreat").height = oh;
- }
- else if (rate == 1) {
- document.getElementById("imgCreat").width = 222;
- document.getElementById("imgCreat").height = 222;
- }
- document.getElementById("imgCreat").src = "Handler.ashx?s=" + s + "&p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&" + Math.random();
- }
- </script>
复制代码 **.aspx.cs文件代码( ImageButton1_Click) - protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
- {
- if (FileUpload1.HasFile)
- {
- string serverUpload = Server.MapPath("tupian/UpLoad");
- if (!Directory.Exists(serverUpload))
- {
- Directory.CreateDirectory(serverUpload);
- }
- string ImgPath = FileUpload1.PostedFile.FileName;//文件全路径
- string imgType = FileUpload1.PostedFile.ContentType;//获取上传文件的类型
- int ImgLength = FileUpload1.PostedFile.ContentLength;//获取上传文件的大小(单位字节)
- string newImageName = "XUHAI_" + DateTime.Now.Year + DateTime.Now.Month + DateTime.Now.Day + DateTime.Now.Hour +
- DateTime.Now.Minute + DateTime.Now.Second + DateTime.Now.Millisecond + Path.GetExtension(ImgPath);
- string serverImgName = serverUpload + "/" + newImageName;
- if (imgType.Substring(0, 5) == "image")
- {
- if (ImgLength <= 3048576)//如果文件大小于3M允许上传
- {
- FileUpload1.PostedFile.SaveAs(serverImgName);
- if (imgType.Substring(imgType.LastIndexOf("/") + 1) == "gif")
- {
- System.Drawing.Image img = System.Drawing.Image.FromFile(serverImgName);
- System.Drawing.Imaging.FrameDimension imgfrm = new FrameDimension(img.FrameDimensionsList[0]);
- int nframe = img.GetFrameCount(imgfrm);
- if (nframe > 1)
- {
- ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('只允许上传BMP|JPEG|PNG格式的图片
- ,不允许上传动画');</script>");
- oImage.Src = "";
- oImage.Width = 0;
- oImage.Height = 0;
- return;
- }
- }
- oImage.Height = 330;
- oImage.Width = 520;
- oImage.Src = "tupian/UpLoad/" + newImageName;
- HyperLink1.NavigateUrl = "tupian/UpLoad/" + newImageName;
- FileInfo fi = new FileInfo(Server.MapPath("tupian/UpLoad/" + newImageName));
- HyperLink1.Text = newImageName + "[上传时间:" + fi.CreationTime + "]";
- }
- else
- {
- oImage.Src = "";
- oImage.Width = 0;
- oImage.Height = 0;
- ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('上传图片不能超过3M');</script>");
- }
- }
- else
- {
- oImage.Src = "";
- oImage.Width = 0;
- oImage.Height = 0;
- ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('图片格式不正确');</script>");
- }
- }
- else
- {
- oImage.Src = "";
- oImage.Width = 0;
- oImage.Height = 0;
- ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('请选择需要上传的图片');</script>");
- }
- }
复制代码
|
|