直接放代码。
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <input type="file" id="myFile"/> <progress id="myProgress" value="0"></progress> <hr/> <script src="${pageContext.request.contextPath}/js/jquery-1.12.3.js"></script> <script>//第一种方式，ajax绑定进度条 $("#myFile").change(function () { var formData = new FormData(); formData.append("filename",$(this)[0].files[0]); $.ajax({ method: "post",//请求方式 url: "xxxx",//请求服务端地址 data: formData, //这里上传的数据使用了formData 对象 contentType: false,//避免JQuery操作头部信息，丢失边界符，从而使服务端无法识别此编码类型文件 processData: false,//不序列化将要传输的文件数据 xhr: function () { //这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用 var xhr = $.ajaxSettings.xhr(); if (onprogress && xhr.upload) { xhr.upload.addEventListener("progress", onprogress, false); return xhr; } }, success:function () {//完成事件时 }, error:function () {//出现错误时的事件 } }); }); /** * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次 */ function onprogress(evt) { var loaded = evt.loaded; //已经上传大小情况 var tot = evt.total; //附件总大小 var per = Math.floor(100 * loaded / tot); //已经上传的百分比 $("#myProgress").attr("value",per); } </script> </body> </html>