ASP. NET 사진 업로드 및 캡 처
사진 업로드 자료:https://www.jb51.net/article/87654.htm
캡 처 플러그 인:http://code.ciaoca.com/jquery/jcrop/
전단
인용 추가
1 <script src="../js/jquery.min.js">script>
2 <link href="../Css/jquery.Jcrop.min.css" rel="stylesheet" />
3 <script src="../js/jquery.Jcrop.min.js">script>HTML 코드
1 <input type="file" name="photo" id="photo" value="" placeholder=" ">
2 <input type="button" onclick="postData();" value=" " name="" style="width: 100px; height: 30px;">
3 <img id="showPhoto" />자 바스 크 립 트 코드
1
<span style="color: #008080;"> 2</span> <span style="color: #008000;">//</span><span style="color: #008000;"> </span>
<span style="color: #008080;"> 3</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> postData() {
</span><span style="color: #008080;"> 4</span> <span style="color: #0000ff;">var</span> formData = <span style="color: #0000ff;">new</span><span style="color: #000000;"> FormData();
</span><span style="color: #008080;"> 5</span> <span style="color: #008000;">//</span><span style="color: #008000;"> </span>
<span style="color: #008080;"> 6</span> formData.append("Filedata", $("#photo")[0].files[0<span style="color: #000000;">]);
</span><span style="color: #008080;"> 7</span> <span style="color: #000000;"> $.ajax({
</span><span style="color: #008080;"> 8</span> url: "/ashx/upload.ashx?action=upload", <span style="color: #008000;">/*</span><span style="color: #008000;"> </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 9</span> type: 'post'<span style="color: #000000;">,
</span><span style="color: #008080;">10</span> <span style="color: #000000;"> data: formData,
</span><span style="color: #008080;">11</span> contentType: <span style="color: #0000ff;">false</span><span style="color: #000000;">,
</span><span style="color: #008080;">12</span> processData: <span style="color: #0000ff;">false</span><span style="color: #000000;">,
</span><span style="color: #008080;">13</span> success: <span style="color: #0000ff;">function</span><span style="color: #000000;"> (res) {
</span><span style="color: #008080;">14</span> $("#showPhoto").attr("src"<span style="color: #000000;">, res);
</span><span style="color: #008080;">15</span> <span style="color: #000000;"> CutPhoto();
</span><span style="color: #008080;">16</span> <span style="color: #000000;"> }
</span><span style="color: #008080;">17</span> <span style="color: #000000;"> })
</span><span style="color: #008080;">18</span> <span style="color: #000000;"> }
</span><span style="color: #008080;">19</span> <span style="color: #008000;">//</span><span style="color: #008000;"> </span>
<span style="color: #008080;">20</span> <span style="color: #0000ff;">function</span><span style="color: #000000;"> CutPhoto() {
</span><span style="color: #008080;">21</span> <span style="color: #0000ff;">var</span><span style="color: #000000;"> jcropApi;
</span><span style="color: #008080;">22</span> $('#showPhoto'<span style="color: #000000;">).Jcrop({
</span><span style="color: #008080;">23</span> <span style="color: #008000;">//</span><span style="color: #008000;"> </span>
<span style="color: #008080;">24</span> onSelect: <span style="color: #0000ff;">function</span><span style="color: #000000;"> (c) {
</span><span style="color: #008080;">25</span> <span style="color: #000000;"> $.ajax({
</span><span style="color: #008080;">26</span> url: "/ashx/upload.ashx?action=cut"<span style="color: #000000;">,
</span><span style="color: #008080;">27</span> type: "post"<span style="color: #000000;">,
</span><span style="color: #008080;">28</span> <span style="color: #000000;"> data: {
</span><span style="color: #008080;">29</span> "x"<span style="color: #000000;">: c.x,
</span><span style="color: #008080;">30</span> "y"<span style="color: #000000;">: c.y,
</span><span style="color: #008080;">31</span> "width"<span style="color: #000000;">: c.w,
</span><span style="color: #008080;">32</span> "height"<span style="color: #000000;">: c.h,
</span><span style="color: #008080;">33</span> "imgSrc": $("#showPhoto").attr("src"<span style="color: #000000;">)
</span><span style="color: #008080;">34</span> <span style="color: #000000;"> },
</span><span style="color: #008080;">35</span> success: <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
</span><span style="color: #008080;">36</span>
<span style="color: #008080;">37</span> <span style="color: #000000;"> }
</span><span style="color: #008080;">38</span> <span style="color: #000000;"> });
</span><span style="color: #008080;">39</span> <span style="color: #000000;"> },
</span><span style="color: #008080;">40</span> allowSelect: <span style="color: #0000ff;">true</span>,<span style="color: #008000;">//</span><span style="color: #008000;"> </span>
<span style="color: #008080;">41</span> baseClass: 'jcrop'
<span style="color: #008080;">42</span> }, <span style="color: #0000ff;">function</span><span style="color: #000000;"> () {
</span><span style="color: #008080;">43</span> jcropApi = <span style="color: #0000ff;">this</span><span style="color: #000000;">;
</span><span style="color: #008080;">44</span> <span style="color: #000000;"> });
</span><span style="color: #008080;">45</span> <span style="color: #000000;"> }
</span><span style="color: #008080;">46</span> 백 스테이지
일반 프로세서 upload. ashx 추가
코드
1 public class upload : IHttpHandler
2 {
3
4 public void ProcessRequest(HttpContext context)
5 {
6 context.Response.ContentType = "text/plain";
7 // action
8 string action = context.Request["action"];
9 if (action == "upload")
10 {
11 Upload(context);
12 }
13 else if (action == "cut")
14 {
15 CutPhoto(context);
16 }
17 }
18
19 public bool IsReusable
20 {
21 get
22 {
23 return false;
24 }
25 }
26 ///
27 ///
28 ///
29 private void Upload(HttpContext context)
30 {
31 //
32 HttpPostedFile file = context.Request.Files["Filedata"];
33 //
34 if (file != null)
35 {
36 //
37 string fileName = Path.GetFileName(file.FileName);
38 //
39 string fileExt = Path.GetExtension(fileName);
40 //
41 if (fileExt == ".jpg")
42 {
43 //
44 string filePath = "/UploadFile/" + DateTime.Now.Year + DateTime.Now.Month + DateTime.Now.Day;
45 //
46 if (!System.IO.Directory.Exists(context.Request.MapPath(filePath)))
47 {
48 //
49 Directory.CreateDirectory(context.Request.MapPath(filePath));
50 }
51 //
52 string newFileName = filePath + "/" + Guid.NewGuid() + fileExt;
53 //
54 file.SaveAs(context.Request.MapPath(newFileName));
55 //
56 context.Response.Write(newFileName);
57 }
58 }
59 }
60 ///
61 ///
62 ///
63 ///
64 private void CutPhoto(HttpContext context)
65 {
66 int x = Convert.ToInt32(context.Request["x"]);
67 int y = Convert.ToInt32(context.Request["x"]);
68 int width = Convert.ToInt32(context.Request["width"]);
69 int height = Convert.ToInt32(context.Request["height"]);
70 string imgSrc = context.Request["imgSrc"];
71 //
72 using (Bitmap bitmap = new Bitmap(width, height))
73 {
74 //
75 using (Graphics g = Graphics.FromImage(bitmap))
76 {
77 //
78 using (Image img = Image.FromFile(context.Request.MapPath(imgSrc)))
79 {
80 //
81 // ：
82 // ：
83 // ：
84 g.DrawImage(img, new Rectangle(0, 0, width, height), new Rectangle(x, y, width, height), GraphicsUnit.Pixel);
85 string newImgName = Guid.NewGuid().ToString()+".jpg";
86 string dir = "/UploadFile/" + newImgName;
87 bitmap.Save(context.Request.MapPath(dir),System.Drawing.Imaging.ImageFormat.Jpeg);
88 }
89 }
90 }
91 }
92 } 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
