黑马程序员技术交流社区

标题: 小技术分享—图片上传并裁剪图片大小(有图有真相) [打印本页]

---

作者: 王晨    时间: 2012-12-18 16:50
标题: 小技术分享—图片上传并裁剪图片大小(有图有真相)
前几天课程设计时一个图片上传，并可以裁剪大小的小程序，挺实用的……运行效果图，源码都上传上来了！分享给大家，需要的下载使用！（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. 
    
22. sendImg();
    
23. return true;
    
24. }
    
25. else {
    
26. alert("请设置裁剪区域");
    
27. return false;
    
28. }
    
29. }
    
30. };
    
31. function sendImg() {
    
32. var p = document.getElementById("oImage").src;
    
33. var x = document.getElementById("txtX").value;
    
34. var y = document.getElementById("txtY").value;
    
35. var w = document.getElementById("txtW").value;
    
36. var h = document.getElementById("txtH").value;
    
37. var ow = 222;
    
38. var oh = 300;
    
39. var rate = w / h;
    
40. var s = "tupian/userimage/";
    
41. if (rate > 1)//选区的宽大于高
    
42. {
    
43. document.getElementById("imgCreat").width = ow;
    
44. document.getElementById("imgCreat").height = ow / rate;
    
45. }
    
46. else if (rate < 1) //选区的高大于宽
    
47. {
    
48. document.getElementById("imgCreat").width = oh * rate;
    
49. document.getElementById("imgCreat").height = oh;
    
50. }
    
51. else if (rate == 1) {
    
52. document.getElementById("imgCreat").width = 222;
    
53. document.getElementById("imgCreat").height = 222;
    
54. }
    
55. document.getElementById("imgCreat").src = "Handler.ashx?s=" + s + "&p=" + p + "&x=" + x + "&y=" + y + "&w=" + w + "&h=" + h + "&" + Math.random();
    
56. 
    
57. }
    
58. </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. 
    
15. DateTime.Now.Minute + DateTime.Now.Second + DateTime.Now.Millisecond + Path.GetExtension(ImgPath);
    
16. string serverImgName = serverUpload + "/" + newImageName;
    
17. if (imgType.Substring(0, 5) == "image")
    
18. {
    
19. if (ImgLength <= 3048576)//如果文件大小于3M允许上传
    
20. {
    
21. FileUpload1.PostedFile.SaveAs(serverImgName);
    
22. if (imgType.Substring(imgType.LastIndexOf("/") + 1) == "gif")
    
23. {
    
24. System.Drawing.Image img = System.Drawing.Image.FromFile(serverImgName);
    
25. System.Drawing.Imaging.FrameDimension imgfrm = new FrameDimension(img.FrameDimensionsList[0]);
    
26. int nframe = img.GetFrameCount(imgfrm);
    
27. if (nframe > 1)
    
28. {
    
29. ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('只允许上传BMP|JPEG|PNG格式的图片
    
30. 
    
31. ,不允许上传动画');</script>");
    
32. oImage.Src = "";
    
33. oImage.Width = 0;
    
34. oImage.Height = 0;
    
35. return;
    
36. }
    
37. }
    
38. oImage.Height = 330;
    
39. oImage.Width = 520;
    
40. oImage.Src = "tupian/UpLoad/" + newImageName;
    
41. HyperLink1.NavigateUrl = "tupian/UpLoad/" + newImageName;
    
42. FileInfo fi = new FileInfo(Server.MapPath("tupian/UpLoad/" + newImageName));
    
43. HyperLink1.Text = newImageName + "[上传时间：" + fi.CreationTime + "]";
    
44. }
    
45. else
    
46. {
    
47. oImage.Src = "";
    
48. oImage.Width = 0;
    
49. oImage.Height = 0;
    
50. ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('上传图片不能超过3M');</script>");
    
51. }
    
52. }
    
53. else
    
54. {
    
55. oImage.Src = "";
    
56. oImage.Width = 0;
    
57. oImage.Height = 0;
    
58. ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('图片格式不正确');</script>");
    
59. }
    
60. }
    
61. else
    
62. {
    
63. oImage.Src = "";
    
64. oImage.Width = 0;
    
65. oImage.Height = 0;
    
66. ClientScript.RegisterStartupScript(this.GetType(), "", "<script>alert('请选择需要上传的图片');</script>");
    
67. }
    
68. }

复制代码

源码.zip

2012-12-18 16:45 上传

点击文件名下载附件

1.87 MB, 下载次数: 156

---

作者: 许庭洲    时间: 2012-12-18 19:46
值得学习ing!

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2