手机端多文件上传功能：jQuery实现，Java后台接收
<!DOCTYPE html>
<html>
<head>
<title>文件上传</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="file" id="fileInput" multiple/>
<button id="uploadButton">上传</button>
<script>
$(document).ready(function() {
$('#uploadButton').click(function() {
var files = $('#fileInput')[0].files;
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append('files', files[i]);
}
$.ajax({
url: 'your-java-upload-url',
type: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
// 处理上传成功的逻辑
},
error: function(xhr, status, error) {
// 处理上传失败的逻辑
}
});
});
});
</script>
</body>
</html>
<p>在上面的代码中，我们使用了<code><input type="file"></code>元素来创建一个文件选择框，并使用<code>multiple</code>属性允许多文件选择。通过点击"上传"按钮，我们使用<code>FormData</code>对象来构建一个包含所选文件的表单数据，并使用<code>$.ajax()</code>函数向服务器发起一个POST请求来上传文件。请将<code>your-java-upload-url</code>替换为您实际的Java后台上传文件的URL。</p>
<p>在Java后台，您可以使用以下代码来接收上传的文件：</p>
<pre><code class="language-java">import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;
@RestController
public class FileUploadController {
@PostMapping("/your-java-upload-url")
public void handleFileUpload(HttpServletRequest request, HttpServletResponse response,
@RequestBody MultipartFile[] files) {
// 处理上传的文件
}
}
</code></pre>
<p>上面的代码是一个使用Spring框架的Java后台示例，它使用<code>@PostMapping</code>注解来处理POST请求，并使用<code>@RequestBody</code>注解将上传的文件数组绑定到<code>files</code>参数上。您可以根据您的实际情况进行修改和调整。</p>
<p>请注意，由于安全原因，浏览器不允许在没有用户交互的情况下自动触发文件上传，所以用户需要手动选择要上传的文件并点击上传按钮。</p>
原文地址: https://www.cveoy.top/t/topic/p4wX 著作权归作者所有。请勿转载和采集!