Image upload Submission Form function based on Asp.net+easyui frame (JS submit picture) _ Practical skills

My style, first to show you the effect of the map, the specific effect of the figure below, if you feel good very satisfied please refer to the implementation code.

Code for HTML:

<form id= "FF" runat= "server" method= "POST" > <div id= "Content" style= "margin-left:50px;" > <table style= "width:300px" id= "uniform" > <tr> <td> Painting Name: <input id= "Paintingname" Easyui-validatebox "Validtype: ' Paintingname ' type=" text "name=" Paintingname "data-options=" Required:true "/>< /td> </tr> <tr> <td> painting Category: <input id= "Radpaint" value= "Chinese Painting" class= "Easyui-validatebox" Name= " Type "type=" Radio "checked=" Checked "data-options=" required:true "/>" Chinese painting <input id= "rad" name= "type" class= " Easyui-validatebox "type=" Radio "data-options=" Required:true "/> Calligraphy </td> </tr> <tr> <td> Calligraphy and painting Author: <asp:dropdownlist id= "ddlist" runat= "Server" width= "155px" ></asp:DropDownList> </td> </tr > <tr> <td> Calligraphy and painting prices: <input id= "Price" class= "Easyui-numberbox" type= "text" name= "pricing" data-options= " Required:true "/> </td> </tr> <tr> <td> height: <input id=" heIght "class=" Easyui-numberbox "type=" text "name=" height "data-options=" required:true "/>cm</td> </tr> <tr> <td> Width: <input id= "width" class= "Easyui-numberbox" type= "text" name= "width" data-options= "require D:true "/>cm </td> </tr> <tr> <td> Select pictures: <asp:fileupload id=" Idfile "width=" 150px "runat= "Server" onchange= "Javascript:setimagepreview (This,localimag,preview);" > </td> </tr> <tr> <td> preview: <div id= "Localimag" style= width:300px; height:200px; " >  </div> </td> </tr> </table> <input t Ype= "hidden" id= "test" name= "test"/> <div "style=; Text-align:center; " > <a href= "javascript:void (0)" class= "Easyui-linkbutton" onclick= "SubmitForm ()" > Determine </a> <a href= " Javascript:void (0) "class=" easYui-linkbutton "onclick=" ClearForm () "> Cancel </a> </div> <%--display Large icon area--%> <div id=" Divimage " style= "Display:none;left:365px;top:40px;position:absolute" >  </div> </div> </form>

JS code:

Display 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 > 
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; 
}///Hide Picture function out () {document.getElementById (' divimage '). Style.display = "None"; //Save information Function SubmitForm () {$.messager.confirm (' hint ', ' Are you sure you want to add this record? 
', function (r) {if (R) {/////Before submitting UploadFile (); 
var test = document.getElementById ("Test"). Value = "Add"; var paintingname = document.getElementById ("PaintinGname "). Value; 
var ArtistID = document.getElementById ("Ddlist"). Value; var type = $ (": checkbox[name= ' type ']"). attr ("checked") = = true? 
"Calligraphy": "Chinese painting"; 
var price = document.getElementById (' price '). Value; 
var height = document.getElementById ("height"). Value; 
var width = document.getElementById ("width"). Value; 
var idfile = document.getElementById ("Idfile"). Value; First decide whether to upload a picture after submitting $ (' #ff '). Form (' Submit ', {URL: "painting.ashx?paintingname=" + paintingname + "&artistid=" + artist ID + "&type=" + type + "&price=" + price + "&height=" + height + "&width=" + width + "&idfile=" + ID File + "&addid=" + Addid + "&test=" + Test, DataType: "JSON", Onsubmit:function () {return $ (this). Form (' Vali 
Date '); 
}, Success:function {if (result = = "T") {//Empty text box document.getElementById ("Paintingname"). Value = ""; 
document.getElementById ("Price"). Value = ""; 
document.getElementById ("height"). Value = ""; 
document.getElementById ("width"). Value = "";document.getElementById ("Idfile"). Value = ""; 
document.getElementById ("Preview"). Value = ""; $.messager.alert (' hint ', ' Congratulations, information added successfully! 
', ' info '); else {$.messager.alert (' hint ', ' Save failed, please check! 
', ' info '); 
} 
} 
}); 
} 
}); 
//Upload picture function uploadfile () {var idfile = document.getElementById ("Idfile"). Value; 
Decide whether to select the picture if (Idfile = null | | idfile = = "") {$.messager.alert (' hint ', ' please add picture! '); 
document.getElementById ("Idfile"). focus (); 
document.getElementById ("Idfile"). Select (); 
Return 
var options = {type: ' POST ', url: ' Files.ashx ',//success:showresponse}; 
Pass the options to Ajaxform $ (' #ff '). Ajaxsubmit (options); 
}//function Showresponse () {//alert ("Upload succeeded!"); 
function ClearForm () {//Empty text box document.getElementById ("Paintingname"). Value = ""; 
document.getElementById ("Price"). Value = ""; 
document.getElementById ("height"). Value = ""; 
document.getElementById ("width"). Value = ""; 
document.getElementById ("Idfile"). Value = ""; }

Code for the background general handler:

To upload a picture of the general processing program:

<span style= "FONT-SIZE:14PX;" >///<summary> 
///Files Summary description 
///</summary> public 
class Files:ihttphandler 
{ 
public void ProcessRequest (HttpContext context) 
{context 
. Response.ContentType = "Text/plain"; 
Picture name 
httpfilecollection files = context. Request.Files; 
if (Files. Count > 0) 
{for 
(int i = 0; i < files. Count; i++) 
{ 
httppostedfile file = files[i]; 
if (file. ContentLength > 0) 
{ 
//full path 
string fullfullname = file. FileName; 
Gets the name of the picture 
String fileName = fullfullname.substring (Fullfullname.lastindexof ("\") + 1); 
Save path D:\GoodCommunitySystem2.0-replica \goodcommunitysystem\paint\img\ 
string path = "~/paint/img"; 
File. SaveAs (System.Web.HttpContext.Current.Server.MapPath (path) + "\" + fileName); 
}}} public bool IsReusable 
{ 
get 
{return 
false; 
}}} </span>

A generic handler that submits a form:

<summary>///Painting Summary description///</summary> public class Painting:ihttphandler {PAINTINGBLL paint 
INGBLL = new PAINTINGBLL (); 
Entity.paintingentity paintingentity = new entity.paintingentity (); public void ProcessRequest (HttpContext context) {context. 
Response.ContentType = "Text/plain"; string command = Context. request["Test"]. 
ToString (),//foreground message indicating value if (Command = = "Add") {Add (context); }///<summary>///add records///</summary>///<param name= ' context ' ></param> public void add 
(HttpContext context) {Paintingentity.paintingname = context. 
request.querystring["Paintingname"]; Paintingentity.paintingstyle = context. 
request.querystring["type"]; Paintingentity.paintingurl = context. 
request.querystring["Idfile"]; Paintingentity.price = Convert.ToInt32 (context. 
request["Price"]); Paintingentity.addid = Convert.ToInt32 (context. 
request["Addid"]); Paintingentity.artistid = Convert.ToInt32 (context. 
request["ArtistID"]); PaintingeNtity. Height = Convert.ToInt32 (context. 
request.querystring["height"]); Paintingentity.width = Convert.ToInt32 (context. 
request.querystring["width"]); try {if (PAINTINGBLL). ADD (paintingentity)) {context. 
Response.Write ("T"); } else {context. 
Response.Write ("F"); 
The catch (Exception ex) {throw ex; 
} public bool IsReusable {get {false; } 
} 
}

Need to introduce JS:

<%--base style--%> 
<link href= ". /.. /themes/default/easyui.css "rel=" stylesheet "/> 
<%--icon style--%> <link href= 
". /.. /themes/icon.css "rel=" stylesheet "/> 
<%--easyui-js--js files have to be preceded by 
Min.js must precede easyui.min.js <script src= ". /jquery.min.js "></script> 
<%--easyui js--%> <script charset=" Utf-8 "src=" 
. /jquery.easyui.min.js "></script> 
<%--Chinese js--%> 
<script src=". /locale/easyui-lang-zh_cn.js "></script> 
<%--upload picture when js--%> 
<script src=" js/ Jquery.form.js "></script>

Upload the picture, need jquery.form.js js file, download address: http://download.csdn.net/detail/jiuqiyuliang/6919517

Upload a picture, and submit the form is so simple, some JS code + general processing procedures, I believe you will see. I will update some related blogs about Easyui-datagrid on the back of the blog, please look forward to.

Recently, there are netizens, always feel that see is not too clear, can be PAINTINGBLL and paintingentity code paste-----New Look for the hood, I personally feel that the physical layer is not necessary, the following I will paintingbll the source code glued, only for your reference.

Using System; 
Using System.Data; 
Using System.Collections.Generic; 
Using Common; 
Using Entity; 
Using Dalfactory; 
Using Idal;  namespace BLL {///<summary>///paintingbll///</summary> public partial class Paintingbll {private 
ReadOnly Ipaintingdal Dal=dataaccess.createpaintingdal (); The public Paintingbll () {} #region Basicmethod///<summary>///gets the maximum ID///</summary> public int GetMaxID ( ) {return DAL. 
GetMaxID (); ///<summary>///exists the record///</summary> public bool Exists (int paintingid) {return DAL. 
Exists (Paintingid); ///<summary>///Adds a data///</summary> public bool Add (entity.paintingentity Entity) {return DAL. 
ADD (Entity); ///<summary>///Updates a data///</summary> public bool Update (entity.paintingentity Entity) {return DAL. 
Update (Entity); ///<summary>///Deletes a data///</summary> public bool Delete (int paintingid) {return DAL. 
Delete (Paintingid); }
<summary>///Deletes a data///</summary> public bool DeleteList (string paintingidlist) {return DAL. 
DeleteList (paintingidlist); ///<summary>///get an object entity///</summary> public entity.paintingentity getentity (int paintingid) {RET Urn Dal. 
GetEntity (Paintingid); ///<summary>///gets an object entity from the cache///</summary> public entity.paintingentity getentitybycache (int paintin 
GID) {String cachekey = "paintingentityentity-" + paintingid; 
Object objentity = Common.DataCache.GetCache (CacheKey); if (objentity = = null) {try {objentity = dal. 
GetEntity (Paintingid); 
if (objentity!= null) {int entitycache = Common.ConfigHelper.GetConfigInt ("Entitycache"); 
Common.DataCache.SetCache (CacheKey, Objentity, DateTime.Now.AddMinutes (Entitycache), TimeSpan.Zero); 
} catch{}} return (entity.paintingentity) objentity; ///<summary>///Gets the data list///</summary> public DataSet getlist (string strwhere) {return DAL. GetList (strwhere); ///<summary>///Get data list///</summary> public DataSet getpaintinglist (string strwhere) {return DAL.G 
Etpaintinglist (strwhere); ///<summary>///Gets the first few rows of data///</summary> public DataSet getlist (int top,string, strwhere,string Filedorde R) {return DAL. 
GetList (Top,strwhere,filedorder); ///<summary>///Get data list///</summary> public list<entity.paintingentity> getentitylist (String St Rwhere) {DataSet ds = dal. 
GetList (strwhere); Return Datatabletolist (ds. 
Tables[0]); ///<summary>///Get data list///</summary> public list<entity.paintingentity> datatabletolist (datatab 
Le DT) {list<entity.paintingentity> entitylist = new list<entity.paintingentity> (); int rowscount = dt. 
Rows.Count; 
if (Rowscount > 0) {entity.paintingentity Entity; for (int n = 0; n < rowscount n++) {Entity = dal. datarowtoentity (dt. 
Rows[n]); 
if (Entity!= null) {Entitylist.add (Entity); } 
} 
}
return entitylist; 
///<summary>///Get the data list///</summary> public DataSet Getalllist () {return getlist (""); ///<summary>///Paging get data list///</summary> public int GetRecordCount (string strwhere) {return DAL. 
GetRecordCount (strwhere); ///<summary>///Paging get data list///</summary> public DataSet getlistbypage (String strwhere, string by int startIndex, int endindex) {return DAL. 
Getlistbypage (Strwhere, by, StartIndex, Endindex); ///<summary>///Paging get data list///</summary>//public DataSet getlist (int pagesize,int pageindex,string str Where)//{//return dal. 
GetList (Pagesize,pageindex,strwhere); } #endregion basicmethod #region extensionmethod #endregion Extensionmethod}}

The above is a small part of the introduction of the Asp.net+easyui framework based on the implementation of picture upload submission Form function (JS submit pictures), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!