javascript - Ajax图像从html文件上传到codeigniter Controller - 空白$_FILES数组

Question

我有一个带有图像上传表单的 html 文件

<form name="logo_photo" id="logo_image_form" enctype="multipart/form-data" action="" method="post">
        <input type="file" id="logo_upload" name="uploadfile"/>
</form>

和一个jquery脚本来尝试ajax上传此表单 - 就像这样

$(document).ready(function (e) {
    $("#logo_upload").on('change',  function(event){            
        $("#logo_image_form").submit();         
        event.preventDefault();
    });

    $("#logo_image_form").on('submit', function(event){

            event.preventDefault()
        $.ajax({
            type:'POST',
            url: serverUrl+"uploadController/imageuploadAction",
            data:$(this).serialize(),
            cache:false,
            success:function(data){
                console.log("success");
                console.log(data);
            },
            error: function(data){
                console.log("error");
                console.log(data);
            }
        });




        return false;
                event.preventDefault();
    });
});

而codeigniter框架中的 Controller ，只是有一个小的测试返回，就像这样 -

function imageuploadAction() {
    //testing controller

    print_r($_FILES);
}

但返回的是一个空数组。我想编写更多代码来检查和上传图像，例如对 $_FILES['uploadfile']['tmp_name'] 执行测试，但 $_FILES 似乎是空的。

我在这方面缺少什么？任何帮助将不胜感激，谢谢!!

Answer 1

无法通过 $.ajax 上传文件。您可以使用 Iframe 或 xmlhttprequest 版本 2 来执行此操作。

我见过的通过ajax上传文件的最好的jquery插件是jquery.form.js。这适用于所有浏览器并使用 xmlhttprequest 1。

您可以非常有效地使用它。