Simple implementation of a file upload progress bar

A beginner completes the upload of web files. No progress bar. Only the text is not very nice. You need a progress bar. No art. There are a lot of progress bars on the Internet. There are pictures and various frameworks. You have to make it easy. not as complicated as you think.

Jsp page

<Tr>
<Td width = "100"> image </td>
<Td>
<Div style = "width: pixel PX;">
<Div class = "file-box">
<Input type = 'text' name = 'textfieldimg 'id = 'textfieldimg' class = 'txt '/>
<Input type = 'button 'class = 'btn 'value = 'browse...'/>
<Input type = "file" name = "file" class = "file" id = "fileupload2" size = "28" onchange = "document. getElementById ('textfieldimg '). value = this. value "data-url =" http: // 192.168.6.53: 8080/upload "/>
</Div>
<Div id = "div_progress2" style = "visibility: hidden;" class = "progress_div1">
<Div class = "progress_div3">
<Div id = "pro2" style = "float: left; width: 0px; background-color: blue; height: 15px;"> </div>
</Div>
<Div class = "progress_div2"> <span style = "margin-left: 10px;" id = "progress2"> </span> </div>
</Div>
</Div>
</Td>
<Td> </td>
</Tr>

Js

<Script type = "text/javascript"
Src = "$ {pageContext. request. contextPath}/js/jquery. ui. widget. js"> </script>
<Script type = "text/javascript"
Src = "$ {pageContext. request. contextPath}/js/jquery. iframe-transport.js"> </script>
<Script type = "text/javascript"
Src = "$ {pageContext. request. contextPath}/js/jquery. fileupload. js"> </script>

<Script type = "text/javascript"
Src = "$ {pageContext. request. contextPath}/script/jquery-1.8.3.min.js"> </script>

$ ('# Fileupload2'). fileupload ({
Progress: function (e, data ){
Var pro = parseInt (data. loaded/data. total * 100, 10 );
Var div2 = document. getElementById ("div_progress2 ");
Div2.style. visibility = "visible ";
Var p2 = document. getElementById ("pro2 ");
P2.style. width = pro;
$ ('# Progress2'). text (pro + '% ');
If (pro = 100 ){
$ ('# Progress2'). text ('uploaded successfully ');
Var path2 = document. getElementById ('textfieldimg '). value;
Var name2 = getFileName (path2 );
Document. getElementById ('imagefilename'). innerText = name2;

}
}
});
});

Css

. Txt {
Height: 22px;
Border: 1px solid #91c0e3;
Width: 180px;
}


. Btn {
Background-color: # FFF;
Border: 1px solid # CDCDCD;
Height: 24px;
Width: 70px;
}


. File-box {
Float: left;
Position: relative;
Width: 260px
}


. File {
Position: absolute;
Top: 0;
Right: 10px;
Height: 24px;
Filter: alpha (opacity: 0 );
Opacity: 0;
Width: 260px
}


. Progress_div1 {

Width: pixel PX;
Height: 20px;
Vertical-align: middle;
Margin-left: auto;
}


. Progress_div2 {

Margin-left: auto;
Width: 90px;
Height: 20px;
Vertical-align: middle;
Padding-top: 3px;
}


. Progress_div3 {

Float: left;
Width: 100px;
Height: 15px;
Background-color: white;
Border: solid 1px blue;
Vertical-align: middle;
Margin-top: 3px;
 
}