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

CloseAndRefresh送信ボタンをクリックすると、javascript、関数を使用して移動しています。

CloseAndRefresh実際には、関数が別のスレッドを使用してほぼ同時に実行されている間に、アップロード リクエストが送信されます。アップロード リクエストの速度が十分でない場合、Web ページが最初に更新され、アップロード リクエストはすぐに終了します。既存のコードを使用してこれを防ぐ簡単な方法はありません。

リクエストを送信するには、jQuery アップロード プラグインなどの高度なアップロード方法を使用する必要があります。プラグインは、送信の成功/失敗時に関数を実行するためのバインダーを提供します。

于 2012-10-08T13:35:35.327 に答える
0

gigadot に感謝します。以下のように問題を解決します。

HTMLフォームには以前に投稿したコードと同じコードがあり、以前のjsコードには、CloseAndRefresh()jsからだけでなく送信ボタンの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";
}

ここで、ユーザーに適切なメッセージをスローする別のページにリダイレクトします。それで全部です...

于 2012-10-12T09:56:10.277 に答える