jquery Avatar update based on Adminlte

Recently in the lab Management system to write the personal information module, the above requires the realization of changing the Avatar function. Baidu has a lot of, no practical. (or various currencies)

This article describes just the implementation of simple functions (after all, now the beginner stage)

You need to refer to the file in the wrong order.

<script src= "~/js/bootstrap/js/jquery.min.js" ></script>
<script src= "~/js/bootstrap/js/bootstrap.min.js" ></script>
<script src= "~/js/jquery.ui.widget.js" ></script>
<script src= "~/js/jquery.iframe-transport.js" ></script>
<script src= "~/js/jquery.fileupload.js" ></script>

File Links: Http://pan.baidu.com/s/1skH0xnZ

<div class= "Widget-user-image" >                    </div>    <input type=" file "id=" FileUpload "name=" Files " multiple>    <button class= "btn btn-primary" id= "Start" > Modify Avatar </button>

Jquery

<script type= "Text/javascript" >    $ (' #fileupload '). FileUpload ({        URL: "/info/img",        Type: "POST",        dataType: ' json ',        autoupload:true,        acceptfiletypes: '/(\.| \ \) (gif|jpe?g|png|xlsx) $/i ",        add:function (e, data) {            $ (" #Start "). Click (function () {                data.submit ();            })            alert ("Selected file, can update avatar!") ")        ,        success:function (response, status) {            var obj = json.parse (response);            var Imgpath = ".. /.. "+ obj[" FilePath "];            $ ("#imglist"). Append (' <li> </li> ');            $ (' #appear '). attr ("src", Imgpath)        ,        done:function (e, data) {            alert ("Update Finish");        error:function (Error) {            alert ("error");        },    });</script>

C # methods

  Publicjsonresult img (httppostedfilebase files) {Try            {                stringLocalPath ="/images"; stringPath = Server.MapPath ("~"+LocalPath); if(!directory.exists (path))                {directory.createdirectory (path); }                //TimeSpan ts = datetime.now-timezone.currenttimezone.tolocaltime (New DateTime (1970, 1, 1)); //string fileName = (long) ts. TotalMilliseconds + path.getextension (files. FileName);                stringFileName =files.                FileName; Files. SaveAs (Path+"/"+fileName); returnJson ("{\ "filepath\": \ ""+ LocalPath +"/"+ FileName +"\ ", \" sourepath\ ": \""+ files. FileName +"\"}"); }            Catch(Exception ex) {return NULL; }        }

Simple avatar updates can be implemented. So far

jquery Avatar update based on Adminlte