ajax jquery文件上传不起作用

Question

我正在使用 jQuery ajax 上传文件。当我点击上传按钮时，它失败并且ajax的错误部分显示Uncaught TypeError: Cannot read property 'length' of undefined。我检查了代码，发现alerting the jqXHR shows success in the first ajax call,but the ajax call in submitForm() is not working。控制器在$.each(event,data)之前停止，并在控制台中显示上述错误。请帮助我。

我的代码如下：

$(document).ready(function()
{ 
    //for checking whether the file queue contain files or not
    var files;
    // Add events
    $('input[type=file]').on('change', prepareUpload);

    // Grab the files 
    function prepareUpload(event)
    {
        files = event.target.files;
        alert(files);
    }
    $("#file-form").on('submit',uploadFiles);
    function uploadFiles(event)
    {
        event.stopPropagation();  
        event.preventDefault(); 

        // Create a formdata object and add the files
        var data = new FormData();
        $.each(files, function(key, value)
        {
            data.append(key, value);
            //alert(key+' '+ value);
        });
        $.ajax({
            url: 'module/portal/filesharing/upload.php?files',
            type: 'POST',
            data: data,
            cache: false,
            dataType: 'json',
            processData: false, 
            contentType: false, 
            success: function(data, textStatus, jqXHR)
            {
                if(typeof data.error === 'undefined')
                {
                    // Success so call function to process the form
                    submitForm(event, data);
                }
                else
                {
                    console.log('ERRORS: ' + data.error);
                }
            }
        });
        function submitForm(event, data)
        {
            // Create a jQuery object 
            $form = $(event.target);

            // Serialize the form data
            var formData = $form.serialize();//controller stops here

            // sterilise the file names
            $.each(data.files, function(key, value)
            {
                formData = formData + '&filenames[]=' + value;
            });

            $.ajax({
                url: 'update.php',
                type: 'POST',
                data: formData,
                cache: false,
                dataType: 'json',
                success: function(data, textStatus, jqXHR)
                {
                    if(typeof data.error === 'undefined')
                    {
                        // Success so call function to process the form
                        console.log('SUCCESS: ' + data.success);
                    }
                    else
                    {
                        // Handle errors here
                        console.log('ERRORS: ' + data.error);
                    }
                },
                error: function(jqXHR, textStatus, errorThrown)
                {
                    // Handle errors here
                    console.log('ERRORS: ' + textStatus);
                },
                complete: function()
                {
                    // STOP LOADING SPINNER
                }
            });
        }
    }  
});    
</script>

HTML：

<form id='file-form' action="" method="post" enctype="multipart/form-data"> 
    <input type="file" name="file" id="filename" ><br>
    <input type="submit"  id='upload' value="Upload file">
</form>

我的更新.php：

$data = array();
if(isset($_GET['files']))
{    
    $error = false;
    $files = array();
    $uploaddir = 'module/portal/filesharing/upload/';
    foreach($_FILES as $file)
    {
        if(move_uploaded_file($file['tmp_name'], $uploaddir .basename($file['name'])))
        {
            $files[] = $uploaddir .$file['name'];
        }
        else
        {
            $error = true;
        }
    }
    $data = ($error) ? array('error' => 'There was an error uploading your files') :     array('files' => $files);
}
else
{
    $data = array('success' => 'Form was submitted', 'formData' => $_POST);
}

echo json_encode($data);

Answer 1

如果你想让它在跨浏览器上工作，我建议你使用像这样的 iframe http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

或者有一些 jquery 模块使用 flash 进行上传，它们也是旧版本 Internet Explorer 的不错选择

也许你的问题是这个，请检查一下 how to get the uploaded image path in php and ajax?