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框架中的控制器，只需要一个小的测试返回，就像这样 -

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。

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

Answer 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全局变量中获取所有必需的数据。

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

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

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

3 个答案: