Ajaxfileupload of jquery Plugins

Reference study:

First article: http://www.cnblogs.com/kissdodog/archive/2012/12/15/2819025.html

Article Two: http://www.jb51.net/article/50518.htm

How to use:

First step: Introduce jquery and Ajaxfileupload plugins first. Note the sequencing, this needless to say, all the plugins are like this.

    <script src= "Jquery-1.7.1.js" type= "Text/javascript" ></script>    <script src= "Ajaxfileupload.js" Type= "Text/javascript" ></script>

My control code is as follows:

1  Publicactionresult Editphoto (employeemodeluser u)2         {3             stringRealpath ="";4             stringID ="";5 6             if(session["ID"] !=NULL)7             {8 9ID = This. httpcontext.session["ID"]. ToString ();Ten             } OneU.id =Convert.ToInt32 (ID); A  -             if(U.image! =NULL&& u.image.contentlength >0) -             { the                 stringext =U.image.filename; -U.photonumber =ext; -                 stringPath ="~/style/userimages/"+ext; -Realpath =Server.MapPath (path); + U.image.saveas (realpath); -             } +User User =NewUser (); AUser.ID =u.id; atUser. Photonumber =U.photonumber; - Employeemanage. SaveImage (user); -             returnContent (Realpath);//realpath forFile storage Path -}

The view code is as follows:

1 <Divclass= "New_portrait"ID= "Photo">2                      <Divclass= "Portrait_upload"ID= "Portraitno">3                               <span>Upload your avatar</span>4                           </Div>5                           <Divclass= "Portraitshow dn"ID= "Portraitshow">6                             <imgwidth= "+"Height= "+"src= "<%=url.content" ("~/style/userimages/"+model.photonumber)%>">7                             <span>Change your avatar</span>8                               <inputtype= "button"value= "Upload" />  9                           </Div>Ten                             One                           <inputtype= "File"value=""title= "Support jpg, JPEG, GIF, PNG format, file less than 5M"name= "Image"ID= "Image"class= "Myfiles"> A                             <!--<input type= "hidden" id= "Headpichidden"/> - -                                -                               <spanstyle= "Display:none;"ID= "Headpic_error"class= "Error"></span> the                 </Div> -                 <!--end. New_portrait -

JS Code reference the non-parametric MVC example of the first document

1$(function() {//ajaxfileupload Upload User avatar (basic information module in my CV)2$ (": button[value= ' upload ']"). Click (function () {3             if($ (": File.myfiles"). Val (). length > 0) {4 ajaxfileupload ();5             }6             Else {7Alert ("Please select Picture");8             }9         })Ten     }) One     functionajaxfileupload () { A $.ajaxfileupload -         ( -             { theURL: '/employee/editphoto ',//server-side request address for file uploads -Secureuri:false,//generally set to false -Fileelementid: ' Image ',//file upload Space id attribute <input type= "file" id= "image" name= "image"/> -DataType: ' HTML ',//The return value type is generally set to JSON +Successfunction(data, status)//Server Success Response handler function -                 { + alert (data); A$ (": button[value= ' upload ']"). ReplaceWith (' <input type= ' button ' value= ' upload '/> '); at$ (': File.myfiles '). ReplaceWith (' <input type= "file" id= "image" Name= "image" title= "support jpg, JPEG, GIF, PNG format, file less than 5M" class= "Myfiles"/> ');  -                     //$ ("#img1"). attr ("src", "~/" +data); -                 }, -Errorfunction(data, status, E)//Server Response Failure handler function -                 { -                      in                 } -             } to         ) +         return false; -}

Implementation results:

Ajaxfileupload of jquery Plugins