Micro-Community project development notes (front-end article)

The front-end of this micro-community project is mainly used for jquery and Ajax technology. Plug-ins used are jquery.form (form static submission), Jquery.qqface (QQ expression), pickadate (date selection). (I would like to express my heartfelt thanks to the developers of each plugin!) )

The use of the various plug-ins are not described in detail, want to know can be searched on the network.

Here are the main ways to upload:

It is well known that the HTML form contains controls for uploading files:

<input type= "File"/>

However, in the pursuit of interactive effect of today, this way of expression is obviously not good. So we can "trickery", with the function of the file control, and the appearance of other div to achieve beautiful file upload.

The specific implementation is to create a file control and hide it, and then bind the click event of the file with the clicking event of the other control. The specific binding method is as follows:

　　　　

1 <formID= "Upimg"Action=""Method= "POST"enctype= "Multipart/form-data">2     <inputclass= "Upfile"type= "File"name= "UploadFile"Accept= "image/*"style= "Display:none"/>3 </form>4 <Div><spanclass= "CLP"onclick= "CLP ();">Change your avatar</span></Div>5 6 <Scripttype= "Text/javascript">7     functionCLP ()8     {9         return $(". Upfile"). Click ();Ten     } One </Script>

This allows for beautiful file uploads.

Of course, this only implements the file selection, you want to gracefully upload files, you can bind the file control onchange () event

　　　　

1  <formID= "Upimg"Action=""Method= "POST"enctype= "Multipart/form-data">2       <inputclass= "Upfile"type= "File"name= "UploadFile"Accept= "image/*"onchange= "GetForm ();"style= "Display:none"/>3  </form>4  <Div><spanclass= "CLP"onclick= "CLP ();">Change your avatar</span></Div>5   6  <Scripttype= "Text/javascript">7      functionCLP ()8      {9          return $(". Upfile"). Click ();Ten      } One     functionGetForm () A      { -               -          $("#upImg"). Ajaxsubmit (function(message) { the              //processing after a form is submitted successfully -                  -          }); -      } +  - </Script>

It is important to note that the Ajaxsubmit submission form must be imported into the Jquery.form plug-in, and the following code should be added when some of the high-level jquery and jquery.form incompatible display $.handleerror is not a function

//solve the problem of $.handleerror is not a function when uploading images Jquery.form pluginjquery.extend ({handleError:function(S, xhr, status, E) {if(s.error) {S.error.call (S.context||s, XHR, status, E); }                        if(S.global) {(S.context? JQuery (S.context): jquery.event). Trigger ("Ajaxerror", [XHR, S, E]); }}, Httpdata:function(XHR, type, s) {varct = Xhr.getresponseheader ("Content-type"), XML= Type = = "xml" | | !type && Ct && ct.indexof ("xml") >= 0, the data= XML?Xhr.responseXML:xhr.responseText; if(XML && Data.documentElement.tagName = = "ParserError")                            Throw"ParserError"; if(S &&s.datafilter) Data=s.datafilter (data, type); if(typeofdata = = = "string")                         {                            if(Type = = "Script") jquery.globaleval (data); if(Type = = "JSON") Data= window["eval"] ("(" + Data + ")"); }                        returndata; }                });

Micro-Community project development notes (front-end article)