jQuery网页版多文件上传功能，兼容手机移动端，附带Java后台接收示例

<!DOCTYPE html>
<html>
<head>
<title>文件上传</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input id="fileInput" type="file" multiple>
<button id="uploadButton">上传</button>
<div id="progressContainer"></div>
<script>
$(document).ready(function() {
$('#uploadButton').click(function() {
var files = $('#fileInput').prop('files');
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('files', files[i]);
}

$.ajax({
url: '/upload', // 后台接口地址
type: 'POST',
data: formData,
processData: false,
contentType: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener('progress', function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total * 100;
$('#progressContainer').text('上传进度：' + percentComplete.toFixed(2) + '%');
}
}, false);
return xhr;
},
success: function(response) {
// 上传成功后的处理
},
error: function(xhr, status, error) {
// 上传失败后的处理
}
});
});
});
</script>
</body>
</html>
<p>import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;</p>
<p>import java.io.File;
import java.io.IOException;</p>
<p>@SpringBootApplication
@RestController
public class FileUploadApplication {</p>
<p>public static void main(String[] args) {
SpringApplication.run(FileUploadApplication.class, args);
}</p>
<p>@PostMapping(&quot;/upload&quot;)
public void uploadFiles(@RequestParam(&quot;files&quot;) MultipartFile[] files) {
for (MultipartFile file : files) {
// 处理每个上传的文件
try {
file.transferTo(new File(&quot;上传文件保存路径&quot; + file.getOriginalFilename()));
} catch (IOException e) {
e.printStackTrace();
}
}
}
}</p>