Implements the image upload function (form) based on the ASP. NET + easyUI framework ),
Upload images based on the ASP. Net + easyUI framework to upload images and 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 whether the image format is correct, and implement the preview function setImagePreview (obj, localImagId, imgObjPreview) {var array = new Array ('gif', 'jpeg ', 'png ', 'jpg ', 'bmp'); // if (obj. value = '') {$. messager. alert ("Let's select the image to upload! "); Return false;} else {var fileContentType = obj. value. match (/^ (. *)(\.) (. {}) $/) [3]; // This file type is useful for regular expressions. // The Boolean variable var isExists = false; // cyclically determine whether the image format is correct for (var I in array) {if (fileContentType. toLowerCase () = array [I]. toLowerCase () {// set the image size if (obj. files & obj. files [0]) {// under Firefox, set the img attribute imgObjPreview directly. style. display = 'block'; imgObjPreview. style. width = '200px '; imgObjPrevi Ew. style. height = '150px '; // Firefox 7 or later versions cannot be obtained using the getAsDataURL () method. You need to use the imgObjPreview method. src = window. URL. createObjectURL (obj. files [0]);} under else {// IE, use the filter obj. select (); var imgSrc = document. selection. createRange (). text; // The initial size must be set to localImagId. style. width = "200px"; localImagId. style. height = "150px"; // capture Abnormal images to prevent users from modifying the suffix to counterfeit images. try {localImagId. style. filter = "progid: DXImageTransform. microsoft. alphaImage Loader (sizingMethod = scale) "; localImagId. filters. item ("DXImageTransform. microsoft. alphaImageLoader "). src = imgSrc;} catch (e) {$. messager. alert ("the format of the image you uploaded is incorrect. Please select another one! "); Return false;} imgObjPreview. style. display = 'none'; document. selection. empty () ;}isexists = true; return true ;}} if (isExists = false) {$. messager. alert ("the upload image type is incorrect! "); Return false;} // display the image function over (imgid, obj, imgbig) {// The maximum size displayed in a large image is 4 to 3. The size is 400 300. maxwidth = 400; maxheight = 300; // display obj. style. display = ""; imgbig. src = imgid. src; // 1. The width and height are greater than the maximum value, the remaining policies are 2, 3 // 2. If the width is exceeded and the height is not exceeded, set the width to the maximum value // 3. If the width is not exceeded and the height is exceeded, set the height to the maximum value 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 ;}}; // save information function submitForm () {// upload the image first, and then submit upLoadFile (); var test = document. getElementById ("test "). value = "add"; var tbName = document. getElementById ("tbName" ). Value; var idFile = document. getElementById ("idFile "). value; // determine whether to upload the image before submitting $ ('# 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 ('deststroy'); // destroy the dialog object $. messager. alert ("prompt", dataJson. msg) $ ("# dateList "). datagrid ("reload "). datagrid ('clearselections '). datagrid ('clearchecked');} else {$ ("# add_address "). dialog ('deststroy'); // destroy the dialog object $. messager. alert ("prompt", dataJson. msg) }});} // upload image function upLoadFile () {var idFile = document. getElementById ("idFile "). value; // determine whether to select the image var options = {type: "POST", url :'.. /.. /Handler/InputImg. ashx' // success: showResponse}; // pass 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"> <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> <th style =" text-align: right; "class =" style2 "> link logo: </th> <td class =" style3 "> <div style =" width: 307px; height: 22px; "> select image: <input id = "idFile" style = "width: 224px" runat = "server" name = "idFile" onchange = "javascript: 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-linkbutton "> cancel </a> </div> </form> </body>
General Form submission handler:
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 (); // The flag value passed by the front-end 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. failed to add Write ("{\" msg \ ": \". The Link name already exists! \ ", \" Success \ ": false}"); return;} else {try {fr. f_Name = context. request. queryString ["tbName"]. trim ();} catch {context. response. failed to add Write ("{\" msg \ ": \". Check the information! \ ", \" Success \ ": false}"); return ;}try {string img = context. request. queryString ["idFile"]. trim (); if (img = "") {context. response. failed to add Write ("{\" msg \ ": \". Check the image 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. failed to add Write ("{\" msg \ ": \". Check the information! \ ", \" Success \ ": false}"); return ;}} if (frend. add (fr)> 0) {context. response. write ("{\" msg \ ": \" added successfully! \ ", \" Success \ ": true}");} else {context. Response. Write ("{\" msg \ ": \" failed to add. Please check the information! \ ", \" Success \ ": false }");}}
Prototype diagram:
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.