Question

我正在尝试创建AJAX form handler。问题是我在上传图像文件和表格中的其他数据时遇到了麻烦。

上传的文件将导致：

未捕获的TypeError：非法调用

我想这是因为我的AJAX formhandler将processData设置为默认值，因此无法将文件转换为字符串。但是，如果我将processData设置为false，我的php文件将无法识别数据发送。

我怎么能让这个表格很好地发送文件和字符串，然后在php中读取它们？

这是我的 ajax / jquery：

$('#createcompany').click(function() {

            var formData = {

                'ownerid'                : $('#id').text(),
                'companyname'            : $('#companyname').val(),
                'logo'                   : $('#logo')[0].files[0],
                'investment'             : $('#investment').val(),
                'payment'                : $('#payment').val(),
                'companytype'            : $('#companytype').val(),
                'companyresource'        : $('#companyresource').val()
            };

            $.ajax({
                type        : 'POST',
                url         : 'processcreatecompany.php',
                data        : formData,
                dataType    : 'json',
                encode      : true
            }).done(function(data) {

                console.log(data); 

            }).fail(function(data) {

                console.log(data); 

        })
    });

我的 PHP 数据收件人行：

    $ownerid = filter_input(INPUT_POST, 'ownerid', FILTER_SANITIZE_STRING);
    $companyname = filter_input(INPUT_POST, 'companyname', FILTER_SANITIZE_STRING);
    $investment = filter_input(INPUT_POST, 'investment', FILTER_DEFAULT);
    $payment = filter_input(INPUT_POST, 'payment', FILTER_DEFAULT);
    $companytype = filter_input(INPUT_POST, 'companytype', FILTER_SANITIZE_STRING);
    $companyresource = filter_input(INPUT_POST, 'companyresource', FILTER_SANITIZE_STRING);

对于文件请求我会使用它：

$_FILES['logo']

修改

表单的HTML标记（因为我刚添加了表单以便能够调用它而有点乱）：

    <form id="formcompany">
        <div class="new-company-informations">
            <h1>BASIC INFORMATION</h1>
            <div id="company-name" class="company-info"><h1>Company name:</h1><input type="text" name="companyname" id="companyname" maxlength="50"></div>
            <div id="company-logo" class="company-info"><h1>Company logo:</h1><input type="file" name="logo" id="logo"></div>
            <div id="company-investment" class="company-info"><h1>First investment amount:</h1><input type="text" name="investment" id="investment"></div>
            <div id="company-payment" class="company-info"><h1>Basic wage per EP:</h1><input type="text" name="payment" id="payment" maxlength="20"></div>
        </div>

        <div class="new-company-separator"></div>

        <div class="new-company-area">
            <h1>AREA OF ECONOMY</h1>
            <div id="company-type" class="company-area">
                <h1>Company type:</h1>
                <select name="companytype" id="companytype">
                    <option value="" selected="selected">Choose company type</option>
                    <option value="1">Resource gathering (5.000 eDollars)</option>
                    <option value="2">Processing/manufacturing (15.000 eDollars)</option>
                    <option value="3">Production (30.000 eDollars)</option>
                    <option value="4">Labolatory (100.000 eDollars)</option>
                    <option value="5">Architecture development (500.000 eDollars)</option>
                    <option value="6">Innovations (1.000.000 eDollars)</option>
                </select>
            </div>
            <div id="company-resource" class="company-area">
                <h1>Resource:</h1>
                <select name="companyresource" id="companyresource">
                    <option value="" selected="selected">Choose resource</option>
                    <option value="1">Lumbermill (Wood)</option>
                    <option value="2">Quarry (Stone)</option>
                    <option value="3">Mine (Ore)</option>
                    <option value="4">Mine (Coal)</option>
                    <option value="5">Farm (Food)</option>
                    <option value="6">Farm (Leather and cloth)</option>
                </select>
            </div>

           <input type="hidden" value="<?=$_SESSION['user']['id']?>">
            <div id="company-button" class="company-area">
                <button id="createcompany">Create</button>
            </div>
        </div>
    </form>

Answer 1

使用FormData并解析表单的ID。这样做，表单的所有内容，包括文件，都将通过AJAX解析到服务器端（PHP）

 var formData = new FormData(this);

 $.ajax({
                    type        : 'POST',
                    url         : 'processcreatecompany.php',
                    data        : formData,
                    dataType    : 'json',
                   contentType: false,
                   processData: false,                        
                }).done(function(data) {

                    console.log(data); 

                }).fail(function(data) {

                    console.log(data); 

            })
        });

在你的php中，执行此操作，

var_dump('Posted fields are '.$_POST);
var_dump('Files are '. $__FILES);

AJAX / jQuery / PHP - AJAX表单处理程序“非法调用”

1 个答案: