<form enctype="multipart/form-data">
<input type="file" name="image" id="image" />
</form>

接下來，我們需要編寫JavaScript代碼，用于實現(xiàn)無刷新上傳圖片的功能。首先，我們需要獲取到選中的文件。我們可以使用JavaScript的File API，通過標簽的id來獲取選中的文件：

var fileInput = document.getElementById('image');
var file = fileInput.files[0];

然后，我們需要利用AJAX將文件發(fā)送到服務器。我們可以使用XMLHttpRequest對象來實現(xiàn)AJAX請求。通過創(chuàng)建一個FormData對象，并將選中的文件附加到該對象中，我們可以使用AJAX發(fā)送文件到服務器：

var formData = new FormData();
formData.append('image', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.jsp', true);
xhr.send(formData);

在上傳文件的過程中，我們可以為請求添加一個readystatechange事件監(jiān)聽器，用于實時獲取上傳進度。一旦上傳完成，我們可以從服務器的響應中獲得上傳圖片的URL。在成功加載服務器響應后，我們可以將URL用于在頁面上顯示圖片：

xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
var imageURL = xhr.responseText;
// 在頁面上顯示圖片
var imgElement = document.createElement('img');
imgElement.src = imageURL;
document.body.appendChild(imgElement);
}
};

最后，我們還需要創(chuàng)建一個JSP文件用于處理文件上傳和返回圖片URL的邏輯。在upload.jsp文件中，我們可以使用Java的FileUpload庫來處理文件上傳，并將上傳的圖片保存到服務器上。一旦圖片上傳完成，我們可以返回圖片的URL給前端：

<%@ page import="org.apache.commons.fileupload.*" %><%@ page import="org.apache.commons.fileupload.disk.*" %><%@ page import="org.apache.commons.fileupload.servlet.*" %><%
String imageURL = "";
try {
// 創(chuàng)建一個文件上傳處理工廠
DiskFileItemFactory factory = new DiskFileItemFactory();
// 創(chuàng)建ServletFileUpload對象，用于解析文件上傳請求
ServletFileUpload upload = new ServletFileUpload(factory);
// 解析文件上傳請求
Listitems = upload.parseRequest(request);
// 處理每個文件項
for (FileItem item : items) {
// 判斷當前項是否為文件
if (!item.isFormField()) {
// 保存上傳的文件到指定目錄
String fileName = new File(item.getName()).getName();
String filePath = "uploads/" + fileName;
item.write(new File(filePath));
imageURL = request.getContextPath() + "/" + filePath;
}
}
} catch (Exception e) {
e.printStackTrace();
}
// 返回圖片URL給前端
response.getWriter().write(imageURL);
%>

通過以上步驟，我們就成功地實現(xiàn)了無刷新上傳圖片的功能。用戶可以選擇要上傳的圖片文件，在上傳過程中，頁面不發(fā)生刷新，并且實時地顯示被上傳的圖片。