0

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

html表单代码：

<form id="simpleuploadform" method="post" action="upload" enctype="multipart/form-data">
<table class="span10" border="0">
    <tr>
        <td colspan="3">
            <legend>Simple Upload</legend>
        </td>
    </tr>
    <tr>
        <td>
            <input type="file" name="files[]" multiple="multiple" onchange="getFileSizeandName(this);"/>
            <div id="successdiv" hidden="true" class="label label-success">Image uploaded successfully</div>
            <div id="errordiv" hidden="true" class="label label-error">Image not successfully uploaded</div>
            <div id="streamdiv" hidden="true" class="label label-warning">Issue while uploading try again</div>
        </td>
        <td id="renameFile" align="right"></td>
        <td id="removeFile" align="right"></td>
    </tr>
    <tr>    
        <td colspan="3">
            <div id="uploaddiv">
                <table id="uploadTable" class="table table-striped table-bordered" width="200" height="200" scrolling="yes">
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Size</th>
                        </tr>
                    </thead>
                    <tbody id="tbodyid">
                        <tr id="tr0">
                            <td id="filetd0" height="10px" width="50px"></td>
                            <td id="filesizetd0" height="10px" width="5px"></td>
                        </tr>
                        <tr id="tr1">
                            <td id="filetd1" height="10px" width="50px"></td>
                            <td id="filesizetd1" height="10px" width="5px"></td>
                        </tr>
                        <tr id="tr2">
                            <td id="filetd2" height="10px" width="50px"></td>
                            <td id="filesizetd2" height="10px" width="5px"></td>
                        </tr>
                        <tr id="tr3">
                            <td id="filetd3" height="10px" width="50px"></td>
                            <td id="filesizetd3" height="10px" width="5px"></td>
                        </tr>
                        <tr id="tr4">
                            <td id="filetd4" height="10px" width="50px"></td>
                            <td id="filesizetd4" height="10px" width="5px"></td>
                        </tr>                                           
                    </tbody>
                    <tfoot>
                        <tr>
                            <td id="filecount" height="10px" width="50px"></td>
                            <td id="totalsize" height="10px" width="5px"></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </td>
    </tr>
    <tr>
        <td colspan="3">
            <input type="submit" class="btn btn-primary" onClick="CloseAndRefresh();" value="Start Upload" id="startButton" disabled>
            <input type="reset" class="btn btn-primary" onClick="Clear();" value="Clear" id="clearButton" disabled>
            <input type="button" class="btn" onClick="window.close();" value="Close">
        </td>   
    </tr>
</table>

javascript代码：

<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("");
    });
}

我正在尝试像这样http://www.shutterfly.com/图片上传。

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

4

2 回答 2

0

您正在使用 javascript 导航，CloseAndRefresh单击提交按钮时的功能。

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

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

于 2012-10-08T13:35:35.327 回答
0

Thank you gigadot, i solve the issue as like below,

The html form have the same code as i posted earlier, in the previous js code i have the CloseAndRefresh() method i remove it now from js as well as from the submit button onclick event.

When the form action called the controller, in which i have the code

@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";
}

Now i redirect it to another page in which i throws the appropriate messages for the user. that's all...

于 2012-10-12T09:56:10.277 回答