Ajax Uploading Files

First on

Based on Eazyui development

The current single file upload, or pseudo-progress bar,
As for the real dynamic progress bar needs Ajax to get the file size and total size,
Considering the current project file is under 10MB, so I used a pseudo-progress bar.

On the Code

Html

<form id= "Fileload" action= "/processdeployment/upload" target= "FileUpload" enctype= "Multipart/form-data" method= "POST" ><table style= "line-height:30px; width:420px; margin:0px auto; " &GT;&LT;TR&GT;&LT;TD style= "text-align:right;" > Process Name: </td><td><input id= "Txtprocessname" name= "Txtprocessname" class= "Easyui-textbox" style= " width:300px; "/></td></tr><tr><td style=" text-align:right; > Process files: </td><td><input id= "txtfile" name= "txtfile" data-options= "buttontext: ' Select Zip file '" class= " Easyui-filebox "style=" width:300px; "/></td></tr></table></form><iframe style=" Display:none "Name=" FileUpload "></iframe><divstyle=" text-align:center; line-height:50px; width:420px; margin:0px auto; " ><button id= "Btnsave" class= "Easyui-linkbutton" data-options= "iconcls: ' Icon-save '" style= "width:70px;" > Save </button><button id= "Btncancel" class= "Easyui-linkbutton" data-options= "iconcls: ' Icon-cancel '" Style= "width:70px;" > Cancel </button></div>

Js

$ ("#btnSave"). Bind ("click", Function () {var processName = $ ("#txtProcessName"). TextBox ("GetValue"); if (ProcessName = = "") {$.messager.alert (' System message ', ' please fill in the process name. ' Info '); return;} var Filebox = $ ("#txtFile"). Filebox ("GetValue"), if (Filebox = = "") {$.messager.alert (' System message ', ' Please select Process file. ' Info '); return;} else {if (Filebox.tolowercase (). LastIndexOf (". zip") < 0) {$.messager.alert (' System messages ', ' Please select a zip file. ' Info '); return;}} $.messager.confirm (' System message ', ' Are you sure to save it? ', function (r) {if (R) {$.messager.progress ({title: ' System Message ', msg: ' File crosses ... '}); SetTimeout (function () {$ ("#fileload"). Submit (); $.messager.progress (' close '); $.messager.alert (' System message ', ' file upload succeeded. ' Info '); $ (' #win '). Window (' Close ');}, 1000);});});

Jfinal is used in the background

Controller

public void Upload () {//processengine processengines = Processengines.getdefaultprocessengine ();//Save files UploadFile file = GetFile ("txtfile"); String processName = Getpara ("Txtprocessname"); System.out.println ("xxxx:" +processname); System.out.println ("22222:" +file.getfile (). GetName ());}

Configuration of File Save address

Jfinalcfg.java class Inside

public void Configconstant (Constants me) {//TODO auto-generated method stub//loads a small amount of the necessary configuration, which can then be GetProperty (...) Get the value loadpropertyfile ("config.properties");//Set Configuration file Development mode Me.setdevmode (Getpropertytoboolean ("DevMode", false));// Set page development type Me.setviewtype (viewtype.jsp),//default View location Me.setbaseviewpath ("/view");//Address bar parameter mode Me.seturlparaseparator ("- ")///File Upload storage address, under Webroot Web-inf/classes/diagrams folder Me.setuploadedfilesavedirectory (Pathkit.getwebrootpath () +" /web-inf/classes/diagrams ");}

File after the last successful upload

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Ajax Uploading Files