How to upload multiple files on separate Forms by Ajax upload?

Question

I've worked on this but couldn't fully figure out.

Basically, what I need is to upload 2 or more files separately (only on demand one by one, not all files at once) using Ajax upload. Currently, I have 2 file inputs but somehow, the JavaScript code always uploads the first file input (the one inside "formContentProperty").

Here is my HTML code:

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

Here is my JavaScript code:

$('#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 });
    }

I'd really appreciate any help.

Answer 1

To upload files using ajax file upload

<script>

function uploadFiles() 
{
    var files = $('#previewFile')[0].files;
    var totalFiles = files.length
    for(var i=0; i < totalFiles; i++)
    {
        var formData = new FormData();
        formData.append("previewFile",files[i]);
        doAjaxFileUpload("/storeTempFile.do", formData,function(data)
        {
            data = eval(data);
            if (data.result=="success")
            {
                alert("File uploaded successfully");
            }
            else
            {
                alert("Error occured : "+data);
            }
        },
        function(data)
        {
            alert("Error occured : "+data);
        });
    } 
}
function doAjaxFileUpload(actionURL,params,callbackSuccessFunction,callbackFailureFunction) 
{
    $.ajax(
    {
        url: actionURL,
        type: "POST",
        data: params,
        processData: false,
        contentType: false,
        error: callbackFailureFunction,
        success : callbackSuccessFunction
    }); 
}

</script>