Upload a picture based on the asp.net +easyui frame, upload the picture, submit the form:
<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" >//Check that the picture is in the correct format, Implement preview function Setimagepreview (obj, Localimagid, Imgobjpreview) {var array = new Array (' GIF ', ' jpeg ', ' png ', ' jpg ', ' BMP ');
Can upload file type if (Obj.value = = ") {$.messager.alert (" Let's choose the picture to upload! ");
return false; else {var filecontenttype = Obj.value.match (/^ (. *) (\.) (. {1,8}) $/) [3];
This file type is very useful////Boolean variable var isexists = false; Loop to determine if the picture is in the correct format for (var i in array) {if (filecontenttype.tolowercase () = Array[i].tolowercase ()) {//Picture lattice After the correct type, depending on the browser, set the size of the picture if (obj.fIles && Obj.files[0]) {//Firefox, directly set the img attribute imgObjPreview.style.display = ' block ';
ImgObjPreview.style.width = ' 200px ';
ImgObjPreview.style.height = ' 150px '; Firefox 7 version can not be used above the Getasdataurl () way to obtain, need a way imgobjpreview.src = window.
Url.createobjecturl (Obj.files[0]);
else {//ie, using the filter obj.select ();
var imgsrc = Document.selection.createRange (). text;
The initial size must be set localImagId.style.width = "200px";
LocalImagId.style.height = "150px"; The capture of the image exception prevents the user from modifying the suffix to forge the picture try {localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoad
ER (sizingmethod=scale) ";
LocalImagId.filters.item ("DXImageTransform.Microsoft.AlphaImageLoader"). src = imgsrc;
catch (E) {$.messager.alert ("The picture you uploaded is not in the correct format, please choose again!");
return false;
} ImgObjPreview.style.display = ' none ';
Document.selection.empty ();
} isexists = true; return true;
} if (Isexists = False) {$.messager.alert ("Incorrect upload image type!");
return false;
return false;
}///Show Picture function over (Imgid, obj, imgbig) {//large figure showing maximum size of 4:3 maxwidth = 400;
MaxHeight = 300;
Show obj.style.display = "";
IMGBIG.SRC = IMGID.SRC; 1, width and height are more than, to see who more than, who is more than to set who is the maximum, the remaining policies in accordance with 2, 3//2, if the width exceeds and high no super, set width to maximum//3, if the width is not more than and higher than, set high to Maximum if (Img.width &G T
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;
}
};
Save information Function SubmitForm () {//upload the picture first, then submit UploadFile (); var test = document.getElementById ("Test"). Value =" Add ";
var tbname = document.getElementById ("Tbname"). Value;
var idfile = document.getElementById ("Idfile"). Value; First decide whether to upload a picture after submitting $ (' #ff '). Form (' Submit ', {URL: "...) /.. /handler/add.ashx?tbname= "+ tbname +" &idfile= "+ idfile +" &test= "+ Test, DataType:" JSON ", onsubmit:f
Unction () {if (.). Form (' Validate ') return true;
else {return false;
}, Success:function (data) {var Datajson = $.parsejson (data);
if (datajson.success) {$ ("#add_address"). Dialog (' Destroy ');//Destroy Dialog Object $.messager.alert ("hint", datajson.msg)
$ ("#dateList"). DataGrid ("Reload"). DataGrid (' Clearselections '). DataGrid (' clearchecked ');
else {$ (' #add_address '). Dialog (' Destroy ');//Destroy Dialog Object $.messager.alert ("Prompt", Datajson.msg)}}
});
//Upload picture function uploadfile () {var idfile = document.getElementById ("Idfile"). Value; Decide whether to select the picture var options = {type:"POST", url: '.. /..
/handler/inputimg.ashx '//success:showresponse};
Pass the options to 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 "> Link name: </th> <td style=" Text-align:left "class=" Style1 "> <a Sp: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 > Link Logo: </th> <td class= "Style3" > <div style= "WIDTH:307PX; height:22px; " > select pictures: <input id= "Idfile" style= "width:224px" runat= "Server" Name= "Idfile" onchange= "JAVASC"Ript:setimagepreview (This,localimag,preview); " type= "file"/> </div> <%--preview: <div id= "Localimag" > </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 ()" > Upload </a> <a href= "friendly.aspx" class= "Easyui-linkbut"
Ton "> Cancellation </a> </div> </form> </body>
The general handler for submitting the form:
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 ()//Foreground message value 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\ ": \" Add failed, link name repeat with existing link name!)
\ ", \" Success\ ": false}";
Return else {try {fr. F_name = context. request.querystring["Tbname"].
Trim (); The catch {context. Response.Write ("{\" msg\ ": \" Add failed, please check the information!)
\ ", \" Success\ ": false}";
Return The try {string img = context. request.querystring["Idfile"].
Trim ();
if (img = "") { Context. Response.Write ("{\" msg\ ": \" Add failed, please check the picture Information!)
\ ", \" 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\ ": \" Add failed, please check the information!)
\ ", \" Success\ ": false}";
Return } if (frend. Add (FR) > 0) {context. Response.Write ("{\" msg\ ": \" add success!)
\ ", \" Success\ ": true}"; } else {context. Response.Write ("{\" msg\ ": \" Add failed, please check the information!)
\ ", \" Success\ ": false}";
}
}
Prototype diagram:
The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
