This tutorial gives you an overview on how to Upload files using jsp with file uploader progress bar using uploadify and jqUploader. You can download the finished project down below.
Create a file ajaxupload.jsp and you would need to add a form element,input file element and apply some styles to it and add a uploader control from JQUploader to a jsp page like the code below.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>upload using progress bar</title>
<script type="text/javascript" src="assets/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="assets/js/jquery.uploadProgress.js"></script>
<script type="text/javascript">
$(function() {
$('form').uploadProgress({
/* scripts locations for safari */
jqueryPath: "assets/js/jquery-1.4.4.min.js",
uploadProgressPath: "assets/js/jquery.uploadProgress.js",
start:function(){},
uploading: function(upload) {$('#percents')
.html(upload.percents+'%');},
interval: 2000
});
});
</script>
<style type="text/css">
.bar {
width: 300px;
}
#progress {
background: #eee;
border: 1px solid #222;
margin-top: 20px;
}
#progressbar {
width: 0px;
height: 24px;
background: #333;
}
</style>
</head>
<body>
<form id="upload" enctype="multipart/form-data"
action="upload.jsp" method="post">
<input name="file" type="file"/>
<input type="submit" value="Upload"/>
</form>
<div id="uploading">
<div id="progress" class="bar"></pre>
<div id="progressbar"> </div>
<pre>
</div>
</div>
<div id="percents"></div>
</body>
</html>
Then, you w’d need to add a jsp page where in you have to write the functionality for uploading files using apache commons library.Create a file “upload.jsp” and add the code like the one below.
<%@ page import="java.util.*" %>
<%@ page import="java.util.Iterator" %>
<%@ page import="java.io.File" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*"%>
<%@ page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@ page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page import="org.apache.commons.fileupload.*,java.util.UUID"%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<center>
<table border="2">
<%
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
FileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
//System.out.println(upload.parseRequest(request));
List items=null;
try {
items = upload.parseRequest(request);
} catch (FileUploadException e) {
e.printStackTrace();
}
Iterator itr = items.iterator();
while (itr.hasNext()) {
FileItem item = (FileItem)(itr.next());
//out.println("itr");
if (item.isFormField()) {
try{
String field=item.getFieldName();
String value=item.getString();
System.out.println("field="+value);
}
catch(Exception e){}
}
else {
try {
UUID uuid = UUID.randomUUID();
String itemName = item.getName();
String tempName = uuid.toString();
File savedFile =
new File("D:\\file_uploads\\"+ tempName + "_"+
itemName);
item.write(savedFile);
out.println("done");
} catch (Exception e) {
e.printStackTrace();
}
}
}
%>
</table>
</center>
Here is the demo project which gives you an overview on how to upload files using jsp. If you have already installed Netbeans you can simply download the project which is zip file, you need to extract the zip file and open it with netbeans. You can upload files using uploadify control, open uploadify.jsp file. Build the project and run the project.
thanx…working fine..
Hi,
It will work fine but I am searching for a different solution. Like here you have used a time interval of 2 sec. Thats a fixed value but if I want to upload a file of 3 kb it wont take that time so what the progressn bar will show??
my query is the exact upload time and the exact progress bar percentage. If I upload a file with 3 kb it will show the actual time and actual precentage of loading and also for 3 MB file exact timing and percentage.
If you have any solution please let me know.
Thanks in advance.
Reagrds,
Anirban
Thanks man! I was searching a long time for something like this.