Ajax implements file upload with progress bar effect

This time I will bring you Ajax implementationFile uploadwith progress bar effect function, Ajax implementation of file upload with progress bar effectWhat are the precautions, the following is a practical case, Let’s take a look.

1. Overview

In the actual web application development or website development process, it is often necessary to implement the file upload function. During the file upload process, users often need to wait for a long time. In order to let users know the upload progress in time, the file upload progress bar can be displayed while uploading the file. Run this example, as shown in Figure 1, access the file upload page, click the "Browse" button to select the file to be uploaded, note that the file cannot exceed 50MB, otherwise the system will give an error prompt. After selecting the file to be uploaded, click the "Submit" button, the file will be uploaded and the upload progress will be displayed.

2. Technical points

Mainly uses the open source Common-FileUpload component to realize segmented file upload, so as to realize the upload process , and continuously obtain the upload progress. The Common-FileUpload component is introduced in detail below.

The Common-FileUpload component is a sub-project under the jakarta-commons project under the Apache organization. This component can easily parse various form fields in multipart/form-data type requests. This component requires support from another component called Common-IO. These two component package files can be downloaded from the http://commons.apache.org website.

(1) Create an upload object

When the Common-FileUpload component implements file upload, you need to create a factory object and create a new one based on the factory object. File upload object, the specific code is as follows:

DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);

(2) Parse upload request

After creating a file upload object, you can use the object to parse the upload request, Obtaining all form items can be achieved through the parseRequest() method of the file upload object. The syntax structure of the parseRequest() method is as follows:

public List parseRequest(HttpServletRequest request) throws FileUploadException

(3) FileItem class

In the Common-FileUpload component, whether it is a file field or a normal form field, Treat it as a FileItem object. If the object's isFormField() method returns true, it means it is an ordinary form field, otherwise it is a file field. When implementing file upload, you can obtain the file name of the uploaded file through the getName() method of the FileItem class, and obtain the size of the uploaded file through the getSize() method.

3. Specific implementation

(1) Create the request.js file and write Ajaxrequest method## in the file #.

(2) Create a new file upload page index.jsp, add a form and form elements for obtaining uploaded file information, and add a

label and display percentage for displaying the progress bar. tag, the key code is as follows:

<form enctype="multipart/form-data" method="post" action="UpLoad?action=uploadFile">

Please select the file to upload:

Note: Please control the file size within 50M.

<p id="progressBar" class="prog_border" align="left">
<img src="images/progressBar.gif" width="0" height="13" id="imgProgress"></p>
<span id="progressPercent" style="width:40px;display:none">0%</span>
<input name="Submit" type="button" value="提交" onClick="deal(this.form)">
<input name="Reset" type="reset" class="btn_grey" value="重置"></td>
</form>

(3) Create a new Servlet implementation class UpLpad for uploading files. Write the method uploadFile() in this class to implement file upload. In this method, the Common-FileUpload component is used to upload files in sections, calculate the upload percentage, and save it to the Session in real time. The key code is as follows:

public void uploadFile(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=GBK");
request.setCharacterEncoding("GBK");
HttpSession session=request.getSession();
session.setAttribute("progressBar",0); //定义指定上传进度的Session变量
String error = "";
int maxSize=50*1024*1024; //单个上传文件大小的上限
DiskFileItemFactory factory = new DiskFileItemFactory(); //创建工厂对象
ServletFileUpload upload = new ServletFileUpload(factory); //创建一个新的文件上传对象
try {
List items = upload.parseRequest(request); // 解析上传请求
Iterator itr = items.iterator(); // 枚举方法
while (itr.hasNext()) {
FileItem item = (FileItem) itr.next(); //获取FileItem对象
if (!item.isFormField()) { // 判断是否为文件域
if (item.getName() != null && !item.getName().equals("")) {//是否选择了文件
long upFileSize=item.getSize(); //上传文件的大小
String fileName=item.getName(); //获取文件名
if(upFileSize>maxSize){
error="您上传的文件太大，请选择不超过50M的文件";
break;
}
// 此时文件暂存在服务器的内存中
File tempFile = new File(fileName); //构造文件目录临时对象
String uploadPath = this.getServletContext().getRealPath("/upload");
File file = new File(uploadPath,tempFile.getName()); 
InputStream is=item.getInputStream();
int buffer=1024; //定义缓冲区的大小
int length=0;
byte[] b=new byte[buffer];
double percent=0;
FileOutputStream fos=new FileOutputStream(file);
while((length=is.read(b))!=-1){
percent+=length/(double)upFileSize*100D; //计算上传文件的百分比
fos.write(b,0,length); //向文件输出流写读取的数据
session.setAttribute("progressBar",Math.round(percent)); 
}
fos.close();
Thread.sleep(1000); //线程休眠1秒
} else {
error="没有选择上传文件！";
}
}
}
} catch (Exception e) {
e.printStackTrace();
error = "上传文件出现错误：" + e.getMessage();
}
if (!"".equals(error)) {
request.setAttribute("error", error);
request.getRequestDispatcher("error.jsp").forward(request, response);
}else {
request.setAttribute("result", "文件上传成功！");
request.getRequestDispatcher("upFile_deal.jsp").forward(request, response);
}
}

(4) In the file upload page index.jsp, import the request.js file of the written Ajax request method, and write the Ajax request method and Ajax

callback function to obtain the upload progress. The key code is as follows:

<script language="javascript" src="js/request.js"></script>
<script language="javascript">
var request = false;
function getProgress(){ 
var url="showProgress.jsp"; //服务器地址
var param ="nocache="+new Date().getTime(); //每次请求URL参数都不同 ，避免上传时进度条不动
request=httpRequest("post",url,true,callbackFunc,param); //调用请求方法 
}
//Ajax回调函数
function callbackFunc(){
if( request.readyState==4 ){ //判断响应是否完成 
if( request.status == 200 ){ //判断响应是否成功
var h = request.responseText; //获得返回的响应数据，该数据位上传进度百分比
h=h.replace(/\s/g,""); //去除字符串中的Unicode空白符
document.getElementById("progressPercent").style.display=""; //显示百分比 
progressPercent.innerHTML=h+"%"; //显示完成的百分比
document.getElementById("progressBar").style.display="block"; //显示进度条
document.getElementById("imgProgress").width=h*(235/100); //显示完成的进度
}
}
}
</script>

(5) Write the showProgress.jsp page, and apply EL expression in this page to output the value of the upload progress bar stored in the session domain. The specific code is as follows:

<%@page contentType="text/html" pageEncoding="GBK"%>
${progressBar}

(6) Write the JavaScript method called by the onclick event of the form submit button. In this method, the setInterval() method of the

window object is used to request the server at regular intervals to obtain the latest upload progress. The key code is as follows:

function deal(form){
form.submit(); //提交表单
timer=window.setInterval("getProgress()",500); //每隔500毫秒获取一次上传进度
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How to use the parameters of the $.Ajax() method

How to use ajax to add, delete, modify and check xml files

The above is the detailed content of Ajax implements file upload with progress bar effect. For more information, please follow other related articles on the PHP Chinese website!