HTML5+Ajax file upload progress bar display (detailed graphic and text explanation)

This time I will bring you HTML5+AjaxFile uploadProgress bardisplay (detailed graphic and text explanation), HTML5+Ajax file upload progress bar displayNotesWhat are they? The following is a practical case. Let’s take a look.

Originally planned to use jquery plug-in for asynchronous file upload, such as uploadfy, but it needs additional support. Some people also use iframe to imitate the asynchronous upload mechanism, which feels 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 for file 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

 

nbsp;html>


 <title>使用XMLHttpRequest上传文件</title>
 <script>
 var xhr = new XMLHttpRequest();
 
 //监听选择文件信息
 function fileSelected() {
  //HTML5文件API操作
  var file = document.getElementById(&#39;fileName&#39;).files[0];
  if (file) {
   var fileSize = 0;
   if (file.size > 1024 * 1024)
   fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + &#39;MB&#39;;
   else
   fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + &#39;KB&#39;;
   document.getElementById(&#39;fileName&#39;).innerHTML = &#39;Name: &#39; + file.name;
   document.getElementById(&#39;fileSize&#39;).innerHTML = &#39;Size: &#39; + fileSize;
   document.getElementById(&#39;fileType&#39;).innerHTML = &#39;Type: &#39; + file.type;
  }
  }
 
 //上传文件
 function uploadFile() {
  var fd = new FormData();
  //关联表单数据,可以是自定义参数
  fd.append("name", document.getElementById(&#39;name&#39;).value);
  fd.append("fileName", document.getElementById(&#39;fileName&#39;).files[0]);
  //监听事件
  xhr.upload.addEventListener("progress", uploadProgress, false);
  xhr.addEventListener("load", uploadComplete, false);
  xhr.addEventListener("error", uploadFailed, false);
  xhr.addEventListener("abort", uploadCanceled, false);
  //发送文件和表单自定义参数
  xhr.open("POST", "<%=path%>/user/uploadifyTest_doUpload");
  xhr.send(fd);
  }
 //取消上传
 function cancleUploadFile(){
 xhr.abort();
 }
 
 //上传进度
 function uploadProgress(evt) {
  if (evt.lengthComputable) {
   var percentComplete = Math.round(evt.loaded * 100 / evt.total);
   document.getElementById(&#39;progressNumber&#39;).innerHTML = percentComplete.toString() + &#39;%&#39;;
  }
  else {
   document.getElementById(&#39;progressNumber&#39;).innerHTML = &#39;unable to compute&#39;;
  }
 }
 //上传成功响应
 function uploadComplete(evt) {
  //服务断接收完文件返回的结果
  alert(evt.target.responseText);
 }
 
 //上传失败
 function uploadFailed(evt) {
  alert("上传失败");
 }
 //取消上传
 function uploadCanceled(evt) {
  alert("您取消了本次上传.");
 }
 </script>

  选择文件  

上传者：  

fd.append("name", document.getElementById('name').value);
fd.append("fileName", document.getElementById('fileName').files[0]);These two sentences bind data to 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);

xhr.addEventListener("abort", uploadCanceled, 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;
 }
}

action configuration

<!-- 文件上传例子 -->
<action>
 <result>
 <param>responseInfo
 <param>true
 </result>
</action>

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

Recommended reading:

Methods for ajax to read Json data

Methods to construct AJAX to implement form JSON conversion

The above is the detailed content of HTML5+Ajax file upload progress bar display (detailed graphic and text explanation). For more information, please follow other related articles on the PHP Chinese website!