-1

场景如下，

用户点击上传图片，然后会显示三个上传文件字段以上传三张图片，还有一个添加更多图片的按钮，用户可以上传无限数量的图片但点击该按钮可以显示更多上传文件字段，我我不确定如何实现这一点。有很多示例，但没有一个确实上传更多图像功能。

我有以下代码，但不确定如何实现按钮以上传更多图像

<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>
4

2 回答 2

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>
于 2013-05-06T03:03:24.970 回答
0

来自 post 方法中的 form multypart 尝试

制作@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);
于 2018-01-27T18:45:42.380 回答