Atitit. h5 File Upload v3

Atitit. h5 File Upload v3

1 . Upload principle 1

2 . new features in version V3 1

3 . Html 1

4 . Js 2

5 . Uploadv2.js 2

6 . upservlet & fileuploadservice {3

7 . Note: Removal of struts interference 3

8 . Reference 4

1. Upload principle

FormData + Apache IO

2. new features in version V3

Modular, using the obj_selector

Fixed bug in version v2

Example person_info_edit. html user Information Avatar modification

3. Html

<script type= "Text/javascript" src= ". /com.attilax/io/uploadv2.js ">

<input id= "Filex" type= "file" Name= "Filefield" style= "Display:nonex" onchange= "uploadsrv.upload ()"/>

<div id= "uppic_btn" name= "btn" type= "button" style= "margin-top:0px; height:30px; Background-color: #0AEAFD "onclick=" Custom_browserbtn_click (); > browse button

<!--process Bar q414 Add recomm-->

<div id= "Process_div" ></div>

</div>

Author :: ★ (Attilax) >>>    nickname : old-Wow paw &NBSP; ( &NBSP; full name:: ATTILAX&NBSP;AKBAR&NBSP;AL&NBSP;RAPANUI&NBSP, Attilax &NBSP, " "  Al &NBSP; Rapa Nui &NBSP, &NBSP; Kanji name: Ayron, Email:[email protected]

reprint Please indicate source: http://www.cnblogs.com/attilax/

4. Js

Import uploadv3.js

<script defer>

var savedir= "00upq4";

Savedir=encodeuricomponent (Savedir);

Uploadsrv=new AtiUploadV3 ("#userHeadImage");

Uploadsrv.up_url= $approot + "/upservlet?savepath=" +SAVEDIR;

Uploadsrv.upload_finish_handler=function (data) {

Data=data.trim ();

Console.log ("Upload_finish_handler:" + data);

Console.log (" end of upload return result :" +data);

$ ("#thumb"). val (data);

Picture Local Preview

var url=getpicsrc4createobjecturl ("Userheadimage");

Console.log (URL);

$ ("#headImage"). attr ("src", url);

};

</script>

5. Uploadv2.js

JavaScript Document

function Atiupload ()

{

This.up_url;

This.upload_finish_handler;

}

Atiupload.prototype. Upload=function ()

{

var self=this;

try{

　$ ("#process_div"). ProgressBar (99);

}catch (e) {

Console.log (e);

}

var fd = new FormData ();

// fd.append ("Upload", 1);

Fd.append ("Upfile", $ ("#filex"). Get (0). Files[0]);

$.ajax ({

Url:this.up_url,

Type: "POST",

Processdata:false,

Contenttype:false,

DATA:FD,

Success:function (d) {

Console.log (d);

Console.log ("----fini");

// $ ("#file_val"). Val (d);

Writecookie ("File_url_frmjs", $ ("#file_val"). Val (), 10);

Self.upload_finish_handler (d);

Upload_finish ();

}

});

}

6. upservlet & fileuploadservice {

7. Note: Removal of struts interference

When the project has a struts framework configured to monitor all URLs /* (default): Will not get data, need to remove The interference from the str UTS

<constant name= "Struts.action.excludePattern" value= "/upservlet,

8. Reference

Pinnge p2.html

D:\wamp\www\lime\com.attilax\io

Atitit. h5 File Upload v3