forms - Ajaxアップロードで複数のファイルを別々のフォームにアップロードするには?

Question

私はこれに取り組みましたが、完全には理解できませんでした。

基本的に、必要なのは、Ajaxアップロードを使用して、 2つ以上のファイルを個別にアップロードすることです （一度にすべてのファイルではなく、1つずつオンデマンドでのみ） 。現在、2 つのファイル入力がありますが、どういうわけか、JavaScript コードは常に最初のファイル入力("formContentProperty" 内のファイル)をアップロードします。

ここに私のHTMLコードがあります:

<div>
    <form enctype="multipart/form-data" id="formContentProperty">
        <input id="fileContentProperty" type="file" name="fileContentProperty" />
        <a id="uploadbuttonContentProperty" href="javascript:void(0)">
            <span>Upload 1</span>
        </a>
    </form>

    <progress></progress>
</div>

<div>
    <form enctype="multipart/form-data" id="formContentPreviewImage">
        <input id="fileContentPreviewImage" type="file" name="fileContentPreviewImage"/>
        <a id="uploadbuttonContentPreviewImage" href="javascript:void(0)">
            <span>Upload 2</span>
        </a>
    </form>

    <progress></progress>
</div>

ここに私のJavaScriptコードがあります:

$('#uploadbuttonContentProperty').click(function () {
            return UpdoadFile('formContentProperty', 'divUploadContentPropertyResultMessage');
    });
    $('#uploadbuttonContentPreviewImage').click(function () {
            return UpdoadFile('formContentPreviewImage', 'divUploadContentPreviewImageResultMessage');
    });

    function UpdoadFile(formElementId, divMessageElementId) {
        var formData = new FormData($('form')[0]);

        $.ajax({
            url         : '<%= base.AjaxUploadHandlerPath %>',  //Server script to process data
            type        : 'POST',
            xhr         : function() {  // Custom XMLHttpRequest
                            var myXhr = $.ajaxSettings.xhr();
                            if(myXhr.upload){ // Check if upload property exists
                                myXhr.upload.addEventListener('progress',progressHandlingFunction, false); // For handling the progress of the upload
                            }
                            return myXhr;
                        },
            //beforeSend: beforeSendHandler,
            success     : function(response) {
                            var obj = $.parseJSON(response);
                            $('#' + divMessageElementId).html(obj.ResultMessage);
                        },
            //error     : errorHandler,
            data        : formData,
            //Options to tell jQuery not to process data or worry about content-type.
            cache       : false,
            contentType : false,
            processData : false
        });
    };

    function progressHandlingFunction(e){
    if(e.lengthComputable)
        $('progressContentProperty').attr({ value: e.loaded, max: e.total });
    }

助けていただければ幸いです。