Web development experience-the use of the rich Avatar upload Editor

Rich Avatar Editor is a good avatar image upload control, can be simple processing of pictures, such as: cut, adjust brightness and other functions; the rich avatar Editor has a parameter configuration that configures the functionality of the control according to its needs, which requires the browser to install Flash Player before it can be used The following is a small demo I made to illustrate how the rich avatar Editor is used.

1. Front Page

To reference the JS file and initialize the rich Avatar Editor, the script code is as follows:

<! DOCTYPE html>"Utf-8"/> <title>simple demo</title> <script src="~/scripts/jquery-1.8.2.min.js"></script> <script type="Text/javascript"Src="/swfobject/swfobject.js"></script> <script type="Text/javascript"Src="/swfobject/fullavatareditor.js"></script>"width:800px; margin:0 auto;"> 
"Text-align:center"> Rich Avatar Upload Editor demo "Swfcontainer">This component requires Flash Player to be installed before it can be used, please<a href="Http://www.adobe.com/go/getflashplayer"> Here </a>Download the installation. </p> </div>        @* <button type="Button"Id="Upload"> Custom Upload button </button>*@    </div> <script type="Text/javascript">//Control parameter reference:http://www.fullavatareditor.com/api.html#usageswfobject.adddomloadevent (function () {varSWF =NewFullavatareditor ("Swfcontainer", {ID:'SWF', Upload_url:'/home/uploadaction',                //src_url: "/samplepictures/default.jpg",//The URL of the original picture that is loaded by defaultSrc_upload:2,//The default is 0, the option to upload the original image, the following values: 0: Do not upload; 1: upload; 2: Show check box selected by userIsshowuploadresulticon:false,//Displays the icon that represents the upload result when the upload is complete (regardless of success or failure)Src_size:"2MB",//The maximum value allowed for the selected local picture file must be with units, such as 888BYTE,88KB,8MBSrc_size_over_limit:"the file size exceeds 2MB, please re-select the picture. ",//The hint text when the size of the selected original picture file exceeds the specified maximum value. The placeholder {0} can be used to indicate the size of the selected original picture file. Src_box_width:" -",//width of the original edit boxSrc_box_height:" -",//height of the original edit boxTab_visible:false,//whether to show tabs *Browse_box_width:" -",//width of the picture selection boxBrowse_box_height:" -",//height of the picture selection boxavatar_sizes:"200*200",//a 100*100|50*50|32*32 that represents the size of one or more groups of avatars. In the meantime, "|" separated by numbers. }, Function (msg) {Switch(msg.code) {//Case 1:alert ("the page successfully loaded the component!") ");                    Break //Case 2:alert ("The default specified picture has been loaded successfully to the edit panel. "); break;                     Case 3:                        if(Msg.type = =0) {alert ("The camera is ready and the user is allowed to use it. "); }                        Else if(Msg.type = =1) {alert ("The camera is ready but the user is not allowed to use it! "); }                        Else{alert ("camera is occupied! "); }                         Break;  Case 5:                        if(Msg.type = =0) {                            if(MSG.CONTENT.SOURCEURL) {alert ("The original image was successfully saved to the server with the URL: \ n"+MSG.CONTENT.SOURCEURL); } alert ("The Avatar has been successfully saved to the server with the URL: \ n"+ Msg.content.avatarUrls.join ("\ n")); }                         Break;            }            }            ); document.getElementById ("Upload"). onclick =function () {Swf.call ("Upload");        };    }); </script></body>
2. Background code
The background is to save the file submitted to the processing and return the corresponding results, the code is as follows:
  PublicActionResult uploadaction () {result result=NewResult (); Result.avatarurls=NewArrayList (); Result.success=false; Result.msg="failure!"; //Take server time + 8-bit random code as part of the file name to ensure that the file name is not duplicated.             stringFileName = DateTime.Now.ToString ("YYYYMMDDHHMMSSFF") + Helpclass.createrandomcode (8); //define a variable to store the number of the current avatar            intAvatarnumber =1; //Traverse all file Domains            foreach(stringFieldNameinchRequest.Files.AllKeys) {httppostedfilebase file=Request.files[fieldname]; //Original picture (name of the file field: __source, which can be handled if the client definition is available for uploading).                 if(FieldName = ="__source") {Result.sourceurl=string. Format ("/upload/csharp_source_{0}.jpg", FileName); File.                SaveAs (Server.MapPath (Result.sourceurl)); }                //Avatar Picture (Name of File field: __avatar1,2,3 ...).                 Else                {                    stringVirtualPath =string. Format ("/upload/csharp_avatar{0}_{1}.jpg", Avatarnumber, fileName);                    RESULT.AVATARURLS.ADD (virtualpath); File.                    SaveAs (Server.MapPath (virtualpath)); Avatarnumber++; }} result.success=true; Result.msg="success!"; //returns the saved result of the picture (the returned content is a JSON string, which can be constructed by itself, using the Newtonsoft.json construct)//Response.Write (Jsonconvert.serializeobject (Result));            returnJson (Result); }
3. Here is the post-run
For configuration of parameters, please refer to: http://www.fullavatareditor.com/api.html#usage