How to display the HTML5 Ajax file upload progress bar

This article mainly introduces HTML5 AjaxFile uploadHow the progress baris displayed. It is based on native HTML5 implementation and does not require falsh support. The progress can be customized and displayed, and the control is flexible. , friends who are interested in HTML5 upload progress bar can refer to

I originally planned to use jquery plug-in for asynchronous file upload, such as uploadfy, but it needs additional support. Some people use iframe to imitate the asynchronous upload mechanism, which feels like Rather awkward. Because the project does not consider lower version browsers, it was decided to use HTML5 for implementation. The following is just a simple demo, you need to make the specific style yourself.
The background is based on strut2 forfile processing, which depends on the project. Just be careful about setting file size limits. This configuration is set according to the specific situation. If it exceeds this value, 404 will be reported.
The first is the upload page, which is relatively simple and comes with the file. or this parameter.

upload.jsp

<%@page language="java" pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%> <% String path = request.getContextPath(); %>      
  
 
 选择文件  
 
 
 
 
 上传者：   
 
 
  

fd.append("name", document.getElementById('name').value);
fd.append("fileName", document.getElementById('fileName').files[0]);
These two sentences binddatato the form. Because html5 supports multiple file uploads,
document.getElementById('fileName').files
returns an array. There is only one file here so remove the element with index 0.

xhr.upload.addEventListener("progress", uploadProgress, false);

##xhr.addEventListener("load", uploadComplete, false);

xhr.addEventListener("error", uploadFailed, false);

Bind progress, upload, error, and interruption events here to provide some interaction. The file progress is displayed in the progress callback.
Then paste the background code and action configuration, UploadifyTestAction.java

package com.bjhit.eranges.actions.test; import java.io.File; import com.opensymphony.xwork2.ActionSupport; public class UploadifyTestAction extends ActionSupport { private static final long serialVersionUID = 837481714629791752L; private File fileName; private String name; private String responseInfo; public String doUpload() throws Exception { System.out.println(name); File myFile = fileName; System.out.println(myFile.getName()); responseInfo = "上传成功!"; return "doUpload"; } public String getName() { return name; } public void setName(String name) { this.name = name; } public File getFileName() { return fileName; } public void setFileName(File fileName) { this.fileName = fileName; } public String getResponseInfo() { return responseInfo; } public void setResponseInfo(String responseInfo) { this.responseInfo = responseInfo; } }

   responseInfo true  

Related recommendations:

The above is the detailed content of How to display the HTML5 Ajax file upload progress bar. For more information, please follow other related articles on the PHP Chinese website!