I saw a good article today.CodeWhen a file is selected for upload, a rotating icon is automatically displayed (text can be changed). After the file is uploaded using Ajax, another icon is displayed,
Note the following code:
The first is the front-end. We need to introduce jquery and ajaxupload. js.
<SCRIPT type = "text/JavaScript" src = "JS/jquery. js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "JS/ajaxupload.3.5.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
VaR uploadindex = 1;
$ (Function (){
Uploadit ();
Deletefile ();
});
Function uploadit (){
$ (". Uploadandnext"). Click (function (){
VaR uploadid = "#" + $ (this). ATTR ("ID ");
VaR BTN = $ (this );
New ajaxupload (uploadid + "",{
Action: "uploadservlet ",
Onchange: function (file, extension ){
$ (Uploadid + ""). Parent (). Find ("input") [0]. value = file;
$ (Uploadid + ""). Parent (). Find (". uploadandokimg"). Show (). ATTR ("src", "images/spinner.gif ");
BTN. ATTR ("disabled", "disabled ");
},
Oncomplete: function (file, response ){
$ (Uploadid + ""). Parent (). Find (". uploadandokimg"). ATTR ("src", "images/OK .gif ");
$ (Uploadid + ""). Parent (). Find (". deleteimg"). ATTR ("src", "images/delete.gif"). Show ();
Uploadindex ++;
$ ("# Uploaddiv "). append ("<div> <input type = 'text'/> <button class = 'uploadandnext 'Id = 'upload'" + uploadindex + "'> browse </button> </div> ");
Uploadit ();
Deletefile ();
}
});
});
}
Function deletefile (){
$ ("# Uploaddiv. deleteimg"). Click (function (){
VaR filename = $ (this). Parent (). Find ("input"). Val ();
VaR thisobj = $ (this );
$. Post ("deleteservlet ",{
"FILENAME": Filename
},
Function (data ){
Thisobj. Parent (). Remove ();
}
);
});
}
</SCRIPT>
</Head>
<Body>
<Div id = "uploaddiv">
<Div> <input type = "text"/> <button class = "uploadandnext" id = "upload1"> browse </button> </div>
</Div>
</Body>
then the servlet is used for processing, that is, to call the commons. the fileupload component
fileitemfactory factory = new diskfileitemfactory ();
servletfileupload upload = new servletfileupload (factory );
try {
List List = upload. parserequest (request);
for (INT I = 0; I fileitem = List. get (I);
string name = fileitem. getname (). substring (fileitem. getname (). lastindexof ("\") + 1);
request. getsession (). setattribute (name, true);
fileitem. write (new file ("D:/" + name);
}< BR >}catch (fileuploadexception e) {
E. printstacktrace ();
}catch (exception e) {
E. printstacktrace ();
}