HTML5 File Upload

Processing with HTML5 New Features

1. jar package: commons-fileupload-1.2.2.jar, commons-io-2.1.jar

2. Environment: backend Java and front-end Dynamic Language JSP

3. Running Environment: the browser supports HTML 5 new features

1. Add several requirements:

<! -- File Upload implementation --> <input id = "samplefile" name = "samplefile" type = "file" onchange = "fileselected (); "/> <br/> <Div id =" FILENAME "> </div> <Div id =" filesize "> </div> <Div id =" filetype "> </div> <Div id = "progressnumber"> </div> <input id = "uploadbtn" type = "button" value = "ajax submit" onclick = "performajaxsubmit (); "> </input> <Div id =" previewpic "> </div> <! -- Preview an image file -->

2. Compile the script:

<SCRIPT type = "text/JavaScript"> function fileselected () {var file = document. getelementbyid ('samplefile '). files [0]; If (File) {var filesize = 0; If (file. size & gt; 1024*1024) filesize = (math. round (file. size * 100/(1024*1024)/100 ). tostring () + 'mb'; else filesize = (math. round (file. size * 100/1024)/100 ). tostring () + 'kb'; document. getelementbyid ('filename '). innerhtml = 'name: '+ file. n Ame; document. getelementbyid ('filesize '). innerhtml = 'size: '+ filesize; document. getelementbyid ('filetype '). innerhtml = 'Type: '+ file. type; // filetype is required.} function uploadprogress (EVT) {If (EVT. lengthcomputable) {var percentcomplete = math. round (EVT. loaded * 100/EVT. total); document. getelementbyid ('ssssnumber '). innerhtml = percentcomplete. tostring () + '%';} else {document. getele Mentbyid ('ssssnumber '). innerhtml = 'unable to compute ';} function compute majaxsubmit () {var samplefile = document. getelementbyid ("samplefile "). files [0]; var formdata = new formdata (); formdata. append ("samplefile", samplefile); var xhr = new XMLHttpRequest (); xhr. upload. addeventlistener ("progress", uploadprogress, false); // xhr. addeventlistener ("LOAD", uploadcomplete, false); // xhr. addeven Tlistener ("error", uploadfailed, false); // xhr. addeventlistener ("Abort", uploadcanceled, false); xhr. open ("Post", "$ {CTX}/user/file. action? Method: uploadfile = xx ", true); xhr. send (formdata); xhr. onload = function (e) {If (this. status = 200) {eval ("Var JSON =" + this. responsetext); // display the image $ ("# previewpic "). append ("  ") ;};}</SCRIPT>

It is estimated that you are confused about var formdata = new formdata (). This code is a newly added object of html5.

3. Background fileaction processing functions:

Public void uploadfile () throws servletexception, ioexception {string status = ""; string serverrealpath = ""; long fileid = 0l; httpservletresponse response = servletactioncontext. getresponse (); httpservletrequest request = servletactioncontext. getrequest (); string savedirectory = "d :\\ njupt \ blog \"; file mir = new file (savedirectory); If (! Mir. exists () Mir. mkdir (); try {diskfileitemfactory DTF = new diskfileitemfactory (); // disk object servletfileupload upload = new servletfileupload (DTF ); // declare the Object List <fileitem> items = upload. parserequest (request); For (fileitem item: Items) {string filename = item. getname (); inputstream content = item. getinputstream (); string tempname = system. currenttimemillis () + ". blog. file "; status =" Upload succes S! "; Serverrealpath = f. getabsolutepath (); fileid = UPF. GETID () ;}} catch (fileuploadexception e) {Throw new servletexception ("parsing File Upload Failed. ", e);} response. setcontenttype ("text/html"); response. setcharacterencoding ("UTF-8"); response. getwriter (). print ("{status: '" + status + "', path: '" + serverrealpath + "', fileid:" + fileid + "}");}

4. Running effect: