Java 在html表中填充上载的文件名和大小，在用户第二次选择文件时添加新值

问题是我有一个表，在用户单击“选择文件”按钮并选择任意数量的文件后，我想在其中填充文件名和文件大小的值，现在的问题是，如果用户第二次单击“选择文件”按钮，我想在表中追加新值，并在数组中添加新文件，以便可以上载。。我的密码是

html表单代码：

javascript代码：

我正在尝试做像这样的图片上传

---

任何帮助都将不胜感激，谢谢朋友们

您正在使用javascript导航，单击submit按钮可关闭和刷新函数

实际发生的情况是，上传请求正在提交，而CloseAndRefresh函数几乎同时使用不同的线程执行。如果上传请求速度不够快，网页将首先刷新，您的上传请求将立即终止。使用现有代码没有简单的方法来防止这种情况

---

您应该使用像jQuery上传插件这样的高级上传方法来发送请求。该插件提供了一个活页夹，用于在成功/失败提交时执行功能。

谢谢gigadot，我解决了如下问题

html表单的代码与我之前发布的代码相同，在之前的js代码中，我使用了CloseAndRefresh方法，现在我将其从js以及submit按钮onclick事件中删除

当表单操作调用控制器时，其中有代码

@RequestMapping(value = "/upload", method = RequestMethod.POST)
public String UploadReceipts(@RequestParam("files[]") List<MultipartFile> file, Model model) throws IOException {
            boolean status = false;
    try
    {
        for(int i=0; i< file.size(); i++)
        {
            if(!file.get(i).isEmpty())
            {
                CommonsMultipartFile cm = (CommonsMultipartFile) file.get(i);
                status = simpleUploadService.uploadFileandSave(cm);
                model.addAttribute("status", status);
            }
        }
    }
    catch (IOException e) {
        status = false;
        model.addAttribute("status", status);
    }
    return "pages/simpleUploadStatus";
}   

现在，我将其重定向到另一个页面，在该页面中为用户抛出适当的消息。

---

仅此而已……

不要重复问题抱歉，这是重复问题的意思，请建议我回答。感谢您的回复，我使用CloseAndRefresh功能关闭弹出窗口并刷新主页，以便上传的内容反映在主页上。你是对的，当我试图同时做两项任务时，会出现问题。让我澄清一下我的情况，我想上传一组文件，因为每次用户选择文件都必须反映在文件列表中，然后单击开始上传按钮，我想上传并向客户端抛出相应的消息。这就是为什么我说你应该使用jquery上传插件或其他高级方法，如ajax，而不刷新它。

<script type="text/javascript">
var totalsizeOfUploadFiles = 0;
function getFileSizeandName(input)
{
    var select = $('#uploadTable tbody');
    $('#renameFile').empty();$('#removeFile').empty();

    if(input.files.length > 0)
    {
        $('#renameFile').append($('<a id="renameRec">Rename Selected</a>'));
        $('#removeFile').append($('<a id="removeRec">Remove Selected</a>'));
        $('#startButton').removeAttr("disabled", "disabled");
        $('#clearButton').removeAttr("disabled", "disabled");
    }
    //if(input.files.length <= 5)
    //{
        for(var i =0; i<input.files.length; i++)
        {           
            var filesizeInBytes = input.files[i].size;
            var filesizeInMB = (filesizeInBytes / (1024*1024)).toFixed(2);
            var filename = input.files[i].name;
            //alert("File name is : "+filename+" || size : "+filesizeInMB+" MB || size : "+filesizeInBytes+" Bytes");

            if(i<=4)
            {               
                $('#filetd'+i+'').text(filename);
                $('#filesizetd'+i+'').text(filesizeInMB);
            }
            else if(i>4)
                select.append($('<tr id=tr'+i+'><td id=filetd'+i+'>'+filename+'</td><td id=filesizetd'+i+'>'+filesizeInMB+'</td></tr>'));

            totalsizeOfUploadFiles += parseFloat(filesizeInMB);
            $('#totalsize').text(totalsizeOfUploadFiles.toFixed(2)+" MB");
            if(i==0)
                $('#filecount').text("1file");
            else
            {
                var no = parseInt(i) + 1;
                $('#filecount').text(no+"files");
            }                       
        }
    //}
}

function CloseAndRefresh() 
{
    var daa = '<%=status%>';
    if(daa == "true")
        $('#successdiv').show();
    else if(daa == "false")
        $('#errordiv').show();
    else
        $('#streamdiv').show();
    opener.location.reload(true);
    self.close();       
}

function Clear()
{
    $('#uploadTable tbody tr td').each(function(){
        $(this).text("");
    });
    $('#uploadTable tfoot tr td').each(function(){
        $(this).text("");
    });
}

@RequestMapping(value = "/upload", method = RequestMethod.POST)
public String UploadReceipts(@RequestParam("files[]") List<MultipartFile> file, Model model) throws IOException {
            boolean status = false;
    try
    {
        for(int i=0; i< file.size(); i++)
        {
            if(!file.get(i).isEmpty())
            {
                CommonsMultipartFile cm = (CommonsMultipartFile) file.get(i);
                status = simpleUploadService.uploadFileandSave(cm);
                model.addAttribute("status", status);
            }
        }
    }
    catch (IOException e) {
        status = false;
        model.addAttribute("status", status);
    }
    return "pages/simpleUploadStatus";
}