A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

前几天课程设计时一个图片上传,并可以裁剪大小的小程序,挺实用的……运行效果图,源码都上传上来了!分享给大家,需要的下载使用!(VS2010)
运行效果图:

部分代码:
javascript代码:
  1. <script type="text/javascript" src="js/jquery.pack.js"></script>
  2. <script type="text/javascript" src="js/jquery.Jcrop.pack.js"></script>
  3. <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
  4. <script type="text/javascript">
  5. $(function () { $('#oImage').Jcrop({ boxWidth: 520, boxHeight: 330, onChange: showCoords, onSelect: showCoords }); }); //当选择、改变选区时都执行showCoords函数
  6. function showCoords(c) {
  7. $("#txtX").val(c.x); //得到选中区域左上角横坐标
  8. $("#txtY").val(c.y); //得到选中区域左上角纵坐标
  9. $("#txtW").val(c.w); //得到选中区域的宽度
  10. $("#txtH").val(c.h); //得到选中区域的高度
  11. }
  12. function checkCoords() {
  13. var defaulturl = document.getElementById("oImage").src;
  14. defaulturl = defaulturl.substring(defaulturl.lastIndexOf("/") + 1);
  15. if (defaulturl == "default1.jpg") {
  16. alert("请上传图片");
  17. return false;
  18. }
  19. else {
  20. if (parseInt($('#txtH').val()) && parseInt($('#txtW').val())) {

  21. sendImg();
  22. return true;
  23. }
  24. else {
  25. alert("请设置裁剪区域");
  26. return false;
  27. }
  28. }
  29. };
  30. function sendImg() {
  31. var p = document.getElementById("oImage").src;
  32. var x = document.getElementById("txtX").value;
  33. var y = document.getElementById("txtY").value;
  34. var w = document.getElementById("txtW").value;
  35. var h = document.getElementById("txtH").value;
  36. var ow = 222;
  37. var oh = 300;
  38. var rate = w / h;
  39. var s = "tupian/userimage/";
  40. if (rate > 1)//选区的宽大于高
  41. {
  42. document.getElementById("imgCreat").width = ow;
  43. document.getElementById("imgCreat").height = ow / rate;
  44. }
  45. else if (rate < 1) //选区的高大于宽
  46. {
  47. document.getElementById("imgCreat").width = oh * rate;
  48. document.getElementById("imgCreat").height = oh;
  49. }
  50. else if (rate == 1) {
  51. document.getElementById("imgCreat").width = 222;
  52. document.getElementById("imgCreat").height = 222;
  53. }
  54. document.getElementById("imgCreat").src = "Handler.ashx?s=" + s + "&p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&" + Math.random();

  55. }
  56. </script>
复制代码
**.aspx.cs文件代码( ImageButton1_Click)
  1. protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
  2. {
  3. if (FileUpload1.HasFile)
  4. {
  5. string serverUpload = Server.MapPath("tupian/UpLoad");
  6. if (!Directory.Exists(serverUpload))
  7. {
  8. Directory.CreateDirectory(serverUpload);
  9. }
  10. string ImgPath = FileUpload1.PostedFile.FileName;//文件全路径
  11. string imgType = FileUpload1.PostedFile.ContentType;//获取上传文件的类型
  12. int ImgLength = FileUpload1.PostedFile.ContentLength;//获取上传文件的大小(单位字节)
  13. string newImageName = "XUHAI_" + DateTime.Now.Year + DateTime.Now.Month + DateTime.Now.Day + DateTime.Now.Hour +

  14. DateTime.Now.Minute + DateTime.Now.Second + DateTime.Now.Millisecond + Path.GetExtension(ImgPath);
  15. string serverImgName = serverUpload + "/" + newImageName;
  16. if (imgType.Substring(0, 5) == "image")
  17. {
  18. if (ImgLength <= 3048576)//如果文件大小于3M允许上传
  19. {
  20. FileUpload1.PostedFile.SaveAs(serverImgName);
  21. if (imgType.Substring(imgType.LastIndexOf("/") + 1) == "gif")
  22. {
  23. System.Drawing.Image img = System.Drawing.Image.FromFile(serverImgName);
  24. System.Drawing.Imaging.FrameDimension imgfrm = new FrameDimension(img.FrameDimensionsList[0]);
  25. int nframe = img.GetFrameCount(imgfrm);
  26. if (nframe > 1)
  27. {
  28. ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('只允许上传BMP|JPEG|PNG格式的图片

  29. ,不允许上传动画');</script>");
  30. oImage.Src = "";
  31. oImage.Width = 0;
  32. oImage.Height = 0;
  33. return;
  34. }
  35. }
  36. oImage.Height = 330;
  37. oImage.Width = 520;
  38. oImage.Src = "tupian/UpLoad/" + newImageName;
  39. HyperLink1.NavigateUrl = "tupian/UpLoad/" + newImageName;
  40. FileInfo fi = new FileInfo(Server.MapPath("tupian/UpLoad/" + newImageName));
  41. HyperLink1.Text = newImageName + "[上传时间:" + fi.CreationTime + "]";
  42. }
  43. else
  44. {
  45. oImage.Src = "";
  46. oImage.Width = 0;
  47. oImage.Height = 0;
  48. ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('上传图片不能超过3M');</script>");
  49. }
  50. }
  51. else
  52. {
  53. oImage.Src = "";
  54. oImage.Width = 0;
  55. oImage.Height = 0;
  56. ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('图片格式不正确');</script>");
  57. }
  58. }
  59. else
  60. {
  61. oImage.Src = "";
  62. oImage.Width = 0;
  63. oImage.Height = 0;
  64. ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('请选择需要上传的图片');</script>");
  65. }
  66. }
复制代码



源码.zip

1.87 MB, 下载次数: 136

评分

参与人数 1技术分 +2 收起 理由
宋天琪 + 2

查看全部评分

1 个回复

倒序浏览
值得学习ing!
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马