输入类型文件-ajax上载和php脚本

我试图使用jquery（v.1.11.3）ajax，结合jquery.validate 1.15来上传包含输入类型文件的表单。你可以从js评论行中看到我尝试过的一些东西。对于每个变体，php脚本都返回“无图像文件”。当然，如果我删除jquery脚本，表单提交时会伴随页面刷新。我真的很想消除页面刷新以获得更好的用户体验，但我没有运气让它起作用。如果有人能帮我修改代码，我会非常感激请注意：我研究了许多jquery ajax的示例。post但这些示例对我没有帮助，因为这些代码结构不能与jquery.Validate插件一起使用。我在这里也找到了这个答案：但正如您从我的代码注释中所看到的，我已经厌倦了这一点，没有运气。 我一定错过了什么

标题##html和js：

选择要上载的图像：
名称

$（文档）.ready（函数（）{
$.validator.setDefaults({
亮点：功能（元素）{
$（元素）。最近（'.form group'）。addClass（'has-error'）；
},
取消高亮显示：功能（元素）{
$（元素）。最近（'.form group'）。removeClass（'has-error'）；
},
errorElement:'span'，
errorClass:“帮助阻止”，
errorPlacement:函数（错误，元素）{
if（element.parent（'.input group'）.length）{
错误.insertAfter（element.parent（））；
}else if（element.parent（'.radio inline'）.length | | element.parent（'.checkbox inline'））{
错误.insertAfter（element.parent（）.parent（））；
}否则{
错误。插入符（元素）；
}
}
});
$（'#addItemsForm'）。验证（{//初始化插件
是的，
submitHandler:function（）{
//var formData=$（'#addItemsForm'）.serialize（）；
//var数据=新表单数据（$（'#addItemsForm'）；
//变量形式=$（'form'）[0]；
//var formData=新formData（表格）；
//控制台日志（addform）；
var frmData=新的FormData（$（此）[0]）；
$.ajax({
url:“imgUploadTest.php”，
数据：frmData，
cache:false，
contentType:false，
processData:false，
数据类型：“json”
})
.done（函数（res、jqXHR、textStatus）{
控制台日志（res）；
//$（'#results'）.html（'拇指链接：'+res[“拇指”]+''）；
//$（'#results'）.append（'Small link:'+res[“Small”]+''）；
//$（'#results'）.append（'Name:'+res[“Name”]+''）；
})
.fail（函数（res、jqXHR、textStatus、errorhorn）{
警报（“失败！”+jqXHR，textStatus）；
});
返回false；
}//提交者
})；//验证
});  // 医生准备好了吗

标题##PHP：

---

好的，我可以回答我自己的问题，尽管我不太确定与之相关的理论，因为我对JS/Jquery相对较新。serialize（）不起作用。我认为这是因为根据定义，文件是二进制文件，因此无法序列化-但请不要引用我的话。因此，您必须使用FormData来发送文件。我意识到了这一点，但无法想出与jquery validation 1.15一起使用的正确语法。见下面的答案。希望它能帮助别人节省一些时间

首先用我的代码纠正新手的错误：添加
type:'post'

第二：保存表单数据的变量，包括输入type=“file”是this
var formData=new formData（$（“#useYourFormElementIdHere”）[0]）

因此，最终结果是：

$.ajax({
     type: "POST",
     url: "imgUploadTest.php",
     data: formData,
     cache: false,
     contentType: false,
     processData: false,
     dataType: 'json'
 }).done({}).fail({}).always({})

好的，我可以回答我自己的问题，尽管我不太确定与之相关的理论，因为我对JS/Jquery相对较新。serialize（）不起作用。我认为这是因为根据定义，文件是二进制文件，因此无法序列化-但请不要引用我的话。因此，您必须使用FormData来发送文件。我意识到了这一点，但无法想出与jquery validation 1.15一起使用的正确语法。见下面的答案。希望它能帮助别人节省一些时间

首先用我的代码纠正新手的错误：添加
type:'post'

第二：保存表单数据的变量，包括输入type=“file”是this
var formData=new formData（$（“#useYourFormElementIdHere”）[0]）

因此，最终结果是：

$.ajax({
     type: "POST",
     url: "imgUploadTest.php",
     data: formData,
     cache: false,
     contentType: false,
     processData: false,
     dataType: 'json'
 }).done({}).fail({}).always({})

        <?php

        include 'imguploader.class.php';

        // FUNCTIONS

            function imagehandler($item_attr_ID) {

                $imgId = $item_attr_ID;
                $img = new imgUploader($_FILES['itemImg']);
                $time = time();
                $thumb = $img->upload('mobileApp/uploads/', $imgId.'_thumb', 100,100);  // change these numbers for display
                $small = $img->upload('mobileApp/uploads/', $imgId.'_small', 400,400);  // change these numbers for display
                //$full = $img->upload_unscaled('mobileApp/uploads/', $time);

                if($thumb && $small){ // && $full
                    return array($thumb, $small);
                      /* TO SHOW IMAGE
                      echo '<img src="'.$thumb.'" alt="aPicture" /> <img src="'.$small.'" alt="aPicture" /> <img src="'.$full.'"alt="aPicture" />';
                      */
                } else {
                    echo ( 'ERROR! '.$img->getError() );  // --> error code 011.1
                }
            } // end imagehandler()

        // Processes

        if (!empty( $_FILES["itemImg"]) ){
            $item_attr_ID = "jPlayerandtheGirls_8_1456";
            list($item_img_thumb, $item_img_small) = imagehandler($item_attr_ID);
                if ($item_img_thumb && $item_img_small){
                    $r["thumb"] = $item_img_thumb; 
                    $r["small"] = $item_img_small;
                } else {
                    $r["thumb"] = "No Thumb"; 
                    $r["small"] = "No Small";
                    $r["name"] = "Didn't get to name";
                    echo json_encode($r);
                }
        } else {
            $r = "No image file";
            echo json_encode($r);
        }

        if (!empty( $_POST["itemName"] )){
            $r["name"] = $_POST["itemName"];
            json_encode($r);
        }
        ?>

$.ajax({
     type: "POST",
     url: "imgUploadTest.php",
     data: formData,
     cache: false,
     contentType: false,
     processData: false,
     dataType: 'json'
 }).done({}).fail({}).always({})