Question

我已经为此做过工作，但无法完全理解。

基本上，我需要的是上传 2个或更多个文件单独 （仅按要求逐个上传，而不是一次上传所有文件）使用Ajax上传。目前，我有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 });
    }

我真的很感激任何帮助。

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>

如何通过Ajax上传在单独的表单上上传多个文件？

1 个答案: