Ajax 图像从 html 文件上传到 codeigniter 控制器 - 空白 $_FILES 数组答案

【问题标题】：Ajax image upload from html file to codeigniter controller - blank $_FILES arrayAjax 图像从 html 文件上传到 codeigniter 控制器 - 空白 $_FILES 数组
【发布时间】：2014-01-20 17:16:50
【问题描述】：

我有一个带有图片上传表单的 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框架中的控制器，只是有一个小的测试返回，像这样-

function imageuploadAction() {
    //testing controller

    print_r($_FILES);
}

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

我错过了什么？任何帮助将不胜感激，谢谢！

【问题讨论】：

标签： javascript php jquery ajax codeigniter

【解决方案1】：

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

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

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

【讨论】：

感谢您的建议，现在试用 xmlhttprequest。顺便说一句，使用 xmlhttprequest 的 iframe 有什么区别？喜欢，任何旧的浏览器问题！？
再次更新了答案。
在 iframe 中，您必须虚拟制作一个表单，然后将原始表单数据传递给虚拟表单并提交给内部。
完全不正确。您可以使用 $.ajax 上传。
@RayNicholus 你能解释一下吗？其实我没有找到任何相关的东西。

【解决方案2】：

一般情况下，您将无法获取 $_FILES 数组中的文件信息。

但是你可以使用一个简单的脚本来做到这一点

请遵循以下模式：

 $.ajax({
         url: url,  
         type: 'POST',
         dataType: 'json',
         xhr: function() {  // Custom XMLHttpRequest
              var myXhr = $.ajaxSettings.xhr();
              if(myXhr.upload){ // Check if upload property exists
              //if you want you can add any progressbar event trigger here      
              }
              return myXhr;
         },
         //Ajax events
         success: function (data) {

         },
         data: formData,
         //Options to tell jQuery not to process data or worry about content-type.
     cache: false,
     contentType: false,
     processData: false
     });

我认为您现在可以在 $_FILES 全局变量中获取所有需要的数据。

【讨论】：

【解决方案3】：

我建议您在表单中包含另一个表单字段，例如冗余隐藏文本输入，然后再试一次

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

看起来很有趣，但试试看吧！

【讨论】：