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

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

时间：2016-05-24 14:00:49

标签： php jquery ajax

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

标题## html和js：

<!DOCTYPE html>
<html>
<body>

<form action="imguploadTest.php" method="post" enctype="multipart/form-data" id="addItemsForm" name="addItemsForm">
<label>Select image to upload:</label>
    <input type="file" name="itemImg" id="itemImg" />

<label>Name</label>
    <input type="text" name="itemName" class="form-control" placeholder="Item Name..." maxlength="25" value="Really Cool Hoodie" />

<input type="submit" value="Upload Form" name="submit">

<div>
    <div id="results"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">    </script>
<script src="js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/additional-methods.min.js"></script>
<script>
$(document).ready(function(){

    $.validator.setDefaults({
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else if (element.parent('.radio-inline').length || element.parent('.checkbox-inline') ) {
                error.insertAfter(element.parent().parent());
            } else {
                error.insertAfter(element);
            }
        }
    });

    $('#addItemsForm').validate({ // initialize the plugin

        debug: true,

        submitHandler: function(){

            //var formData = $('#addItemsForm').serialize();
            //var data = new FormData($('#addItemsForm'));
            //var form = $('form')[0];
            //var formData = new FormData(form);
            //console.log(addform);
            var frmData = new FormData($(this)[0]);

            $.ajax({
                url: "imgUploadTest.php",
                data: frmData,
                cache: false,
                contentType: false,
                processData: false,
                dataType: 'json'
            })
            .done( function(res, jqXHR, textStatus) {
                console.log(res);
                //$('#results').html('<h4>Thumb link: ' + res["thumb"] + '<h4>');
                //$('#results').append('<h4>Small link: ' + res["small"] + '<h4>');
                //$('#results').append('<h4>Name: ' + res["name"] + '<h4>');
            })
            .fail( function (res, jqXHR, textStatus, errorThrown){
                alert("failed!  " + jqXHR, textStatus);
            });

        return false;

        }  // submitHandler

    });  // validate

});  // doc ready

</script>
</body>
</html>

标题## PHP：

        <?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);
        }
        ?>

1 个答案:

答案 0 :(得分：0)

好的，我能够回答我自己的问题，虽然我不完全确定与之相关的理论，因为我对JS / Jquery相对较新。 .serialize（）不起作用。我认为这是因为根据定义，文件是二进制文件，因此无法序列化 - 但不要引用我。所以你必须使用FormData来发送文件。我知道这一点，但无法提出适用于jquery验证1.15的语法。请参阅以下答案。希望它可以帮助别人节省一些时间。

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

第二：保存表单数据的变量，包括输入类型=“文件”，这是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({})