基于ASP.Net +easyUI框架上傳圖片，實現圖片上傳，提交表單：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
<body> <link href="../../Easyui/themes/easyui.css" rel="stylesheet" type="text/css" /> <script charset="utf-8" src="../../Easyui/jquery.easyui.min.js" type="text/javascript"></script> <script charset="utf-8" src="../../Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script> <script charset="utf-8" src="../../Js/jquery.form.js" type="text/javascript"></script> <script type="text/javascript"> //檢查圖片的格式是否正確,同時實現預覽 function setImagePreview(obj, localImagId, imgObjPreview) { var array = new Array('gif', 'jpeg', 'png', 'jpg', 'bmp'); //可以上傳的文件類型 if (obj.value == '') { $.messager.alert("讓選擇要上傳的圖片!"); return false; } else { var fileContentType = obj.value.match(/^(.*)(\.)(.{1,8})$/)[3]; //這個文件類型正則很有用 ////布爾型變量 var isExists = false; //循環判斷圖片的格式是否正確 for (var i in array) { if (fileContentType.toLowerCase() == array[i].toLowerCase()) { //圖片格式正確之后，根據瀏覽器的不同設置圖片的大小 if (obj.files && obj.files[0]) { //火狐下，直接設img屬性 imgObjPreview.style.display = 'block'; imgObjPreview.style.width = '200px'; imgObjPreview.style.height = '150px'; //火狐7以上版本不能用上面的getAsDataURL()方式獲取，需要一下方式 imgObjPreview.src = window.URL.createObjectURL(obj.files[0]); } else { //IE下，使用濾鏡 obj.select(); var imgSrc = document.selection.createRange().text; //必須設置初始大小 localImagId.style.width = "200px"; localImagId.style.height = "150px"; //圖片異常的捕捉，防止用戶修改后綴來偽造圖片 try { localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc; } catch (e) { $.messager.alert("您上傳的圖片格式不正確，請重新選擇!"); return false; } imgObjPreview.style.display = 'none'; document.selection.empty(); } isExists = true; return true; } } if (isExists == false) { $.messager.alert("上傳圖片類型不正確!"); return false; } return false; } } //顯示圖片 function over(imgid, obj, imgbig) { //大圖顯示的最大尺寸 4比3的大小 400 300 maxwidth = 400; maxheight = 300; //顯示 obj.style.display = ""; imgbig.src = imgid.src; //1、寬和高都超過了，看誰超過的多，誰超的多就將誰設置為最大值，其余策略按照2、3 //2、如果寬超過了并且高沒有超，設置寬為最大值 //3、如果寬沒超過并且高超過了，設置高為最大值 if (img.width > maxwidth && img.height > maxheight) { pare = (img.width - maxwidth) - (img.height - maxheight); if (pare >= 0) img.width = maxwidth; else img.height = maxheight; } else if (img.width > maxwidth && img.height <= maxheight) { img.width = maxwidth; } else if (img.width <= maxwidth && img.height > maxheight) { img.height = maxheight; } }; //保存信息 function submitForm() { //先上傳圖片后，再提交 upLoadFile(); var test = document.getElementById("test").value = "add"; var tbName = document.getElementById("tbName").value; var idFile = document.getElementById("idFile").value; //先判斷是否上傳圖片之后在提交 $('#ff').form('submit', { url: "../../Handler/add.ashx?tbName=" + tbName + "&idFile=" + idFile + "&test=" + test, dataType: "json", onSubmit: function () { if ($(this).form('validate')) return true; else { return false; } }, success: function (data) { var dataJson = $.parseJSON(data); if (dataJson.success) { $("#add_address").dialog('destroy'); //銷毀dialog對象 $.messager.alert("提示", dataJson.msg) $("#dateList").datagrid("reload").datagrid('clearSelections').datagrid('clearChecked'); } else { $("#add_address").dialog('destroy'); //銷毀dialog對象 $.messager.alert("提示", dataJson.msg) } } }); } //上傳圖片 function upLoadFile() { var idFile = document.getElementById("idFile").value; //判斷是否選擇圖片 var options = { type: "POST", url: '../../Handler/InputImg.ashx' //success: showResponse }; // 將options傳給ajaxForm $('#ff').ajaxSubmit(options); } </script> <form id="ff" runat="server" method="post"> <table style="width: 422px; margin-top: 20px; height: 91px;"> <tr> <th style="text-align: right; width: 100px;" class="style1"> 鏈接名稱： </th> <td style="text-align: left" class="style1"> <asp:TextBox ID="tbID" runat="server" Style="display: none"></asp:TextBox> <asp:TextBox ID="tbName" runat="server" Width="274px" Height="20px" class="easyui-validatebox" data-options="required:true"></asp:TextBox> </td> </tr> <tr> <th style="text-align: right; " class="style2"> 鏈接logo： </th> <td class="style3"> <div style="width: 307px; height: 22px;"> 選擇圖片:<input id="idFile" style="width: 224px" runat="server" name="idFile" onchange="javascript:setImagePreview(this,localImag,preview);" type="file" /> </div> <%--預 覽: <div id="localImag"> <img id="preview" onclick="over(preview,divImage,imgbig);" src="" style="width: 200px; height: 150px;" /> </div>--%> </td> </tr> </table> <div style="width: 325px; text-align: center; margin-top: 20px; margin-left: 50px"> <input type="hidden" id="test" name="test" /> <a id="btn_sc" href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()"> 上傳</a> <a href="Friendly.aspx" class="easyui-linkbutton">取消</a> </div> </form></body> |
提交表單的一般處理程序：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
BLL.J_Friendly frend = null; Model.J_Friendly fr = null; public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string command = context.Request["test"].ToString();//前臺傳的標示值 if (command == "add") { AddFrend(context); } if (command == "update") { UpdateFrend(context); } }public void AddFrend(HttpContext context) { frend = new BLL.J_Friendly(); fr = new Model.J_Friendly(); string tbName = context.Request.QueryString["tbName"].Trim(); if (frend.Exists("F_Name='" + tbName + "'")) { context.Response.Write("{\"msg\":\"添加失敗，鏈接名稱與已有的鏈接名稱重復！\",\"success\":false}"); return; } else { try { fr.F_Name = context.Request.QueryString["tbName"].Trim(); } catch { context.Response.Write("{\"msg\":\"添加失敗，請核對信息！\",\"success\":false}"); return; } try { string img = context.Request.QueryString["idFile"].Trim(); if (img == "") { context.Response.Write("{\"msg\":\"添加失敗，請核對圖片信息！\",\"success\":false}"); return; } else { string str = context.Request.QueryString["idFile"].Trim(); string str1 = str.Remove(0, str.LastIndexOf("\\") + 1); fr.F_Img = "../../Upload/Images/" + str1; } } catch { context.Response.Write("{\"msg\":\"添加失敗，請核對信息！\",\"success\":false}"); return; } } if (frend.Add(fr) > 0) { context.Response.Write("{\"msg\":\"添加成功！\",\"success\":true}"); } else { context.Response.Write("{\"msg\":\"添加失敗，請核對信息！\",\"success\":false}"); } } |
原型圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
