方案如下,
用户点击上传图片,然后会显示三个上传文件字段上传三张图片,还有一个按钮可以添加更多图片,用户可以上传无限数量的图片但点击该按钮可显示更多上传文件字段,我不知道如何实现这一点。有很多例子,但没有一个上传更多图像功能。
我有以下代码,但不知道如何实现按钮上传更多图片
<s:form action="uploadImages" method="POST" encytype="multipart/form-data">
<s:file label="File 1" name="fileUpload"/>
<s:file label="File 2" name="fileUpload"/>
<s:file label="File 3" name="fileUpload"/>
<s:submit value="submit" name="Upload"/>
</s:form>
答案 0 :(得分:4)
这并不难。
在您的javascript中,跟踪从counter = 0开始的计数器值
将您的第一个上传字段设为:
<input type="file" name="file[0]">
每当用户点击“上传更多图片...”时,请使用JavaScript递增计数器,然后附加新的文件输入字段:
<input type="file" name="file[1]">
等等......
<input type="file" name="file[2]">
<input type="file" name="file[3]">
<input type="file" name="file[4]">
<input type="file" name="file[5]">
当您提交表单时,所有图像都将提交给服务器,您可以使用循环逐个处理每个上传的图像。
要快速添加新文件输入字段,我建议使用jQuery。 首先,在表单上设置ID,如下所示:
<s:form id="myForm" action="uploadImages" method="POST" encytype="multipart/form-data">
<s:file label="File 1" name="file[0]"/>
<s:file label="File 2" name="file[1]"/>
<s:file label="File 3" name="file[2]"/>
<s:submit value="submit" name="Upload"/>
</s:form>
然后,添加一个新的输入字段:
<script type="text/javascript">
var counter = 3;
function onAddMoreButtonClicked() {
for (var i = 0; i < 3; i++) {
$("#myForm").append($("<input>").attr({"type" : "file", "name" : "file["+counter + "]"}));
counter = counter + 1;
}
}
</script>
答案 1 :(得分:0)
来自形式multypart 在post方法中尝试
make @Autowired ServletContext c; 或者在servlet中从中获取对象
byte[] bytes = file.getBytes();
String UPLOAD_FOLDEdR=c.getRealPath("/images");
Path path = Paths.get(UPLOAD_FOLDEdR +"/"+ file.getOriginalFilename());
Files.write(path, bytes);