我的表单使用Ajax提交和文件上传时出现简单的解析错误

Question

我可以将文件上传到所需的目录中，以便使该部分正常工作，但是我不确定为什么在chrome的js控制台中出现解析错误。 由于这个错误，我的底部javascript无法执行，我需要这样做。

这是ajax：

var files;

// Add events
$('input[type=file]').on('change', prepareUpload);

// Grab the files and set them to our variable
function prepareUpload(event)
{
  files = event.target.files;
}

$('form').on('submit', uploadFiles);

// Catch the form submit and upload the files
function uploadFiles(event)
{
  event.stopPropagation(); // Stop stuff happening
  event.preventDefault(); // Totally stop stuff happening

// START A LOADING SPINNER HERE

// Create a formdata object and add the files
var data = new FormData();
$.each(files, function(key, value)
{
    data.append(key, value);
});

$.ajax({
    url: 'submit.php?files',
    type: 'POST',
    data: data,
    cache: false,
    dataType: 'json',
    processData: false, // Don't process the files
    contentType: false, // Set content type to false as jQuery will tell the server its a query string request
    success: function(data, textStatus, jqXHR)
    {
        alert(data);
        script = $(data).text();
        $.globalEval(script);
        if(typeof data.error === 'undefined')
        {
            // Success so call function to process the form
            submitForm(event, data);
        }
        else
        {
            // Handle errors here
            console.log('ERRORS: ' + data.error);
        }

    },
    error: function(jqXHR, textStatus, errorThrown)
    {
        // Handle errors here
        console.log('ERRORS: ' + textStatus);
        // STOP LOADING SPINNER
    }
});
}

这是html：

<?php 
echo '<span class="new_profile_save_upload_image_span"><img     src="'.$url_root.'/images/615721406-612x612.jpg"/ class="new_profile_save_upload_image_img"></span>';
?>
<form action="" method="post" enctype="multipart/form-data" name="new_profile_save_upload_image_input_form" id="new_profile_save_upload_image_input_form">
<input type="file" id="new_profile_save_upload_image_input" name="new_profile_save_upload_image_input" multiple="" accept="image/x-png,image/gif,image/jpeg"/>
<input type="submit" value="Upload Image" name="submit">
</form>

这是PHP：

<?php 

// get mysqli db connection string
$mysqli = new mysqli("localhost", "psych_admin", "asd123", "psych");
if($mysqli->connect_error){
    exit('Error db');
}

// Get theme settings and theme colours and assign the theme colour to the 
theme name
$stmt = $mysqli->prepare("SELECT name FROM user_profiles WHERE rowid=(SELECT 
    MAX(rowid) FROM user_profiles);");
$stmt->execute();
$result = $stmt->get_result();
while($row_1 = $result->fetch_assoc())
{
    $arr_1[] = $row_1;
}
foreach($arr_1 as $arrs_1)
{
    $username = $arrs_1['name'];
}

$data = array();

if(isset($_GET['files']))
{  
    $error = false;
    $files = array();

    // Make dir for file uploads to be held
    if (!file_exists(''.dirname(__FILE__) . '/content/profiles/'.$username.'/avatar')) 
    {
        mkdir(''.dirname(__FILE__) . '/content/profiles/'.$username.'/avatar', 0777, true);
    }
    $uploaddir = './content/profiles/'.$username.'/avatar/';
    foreach($_FILES as $file)
    {
        if(move_uploaded_file($file['tmp_name'], $uploaddir .basename($file['name'])))
        {
            $files[] = $uploaddir .$file['name'];
        }
        else
        {
            $error = true;
        }
    }
    $data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files);
}
else
{
    $data = array('success' => 'Form was submitted', 'formData' => $_POST);
}

echo json_encode($data);

?>

<script>
var scope1 = '<?php echo $url_root;?>';
var scope2 = '<?php echo $username;?>';
var scope3 = '<?php echo $file['name'];?>';
var new_profile_save_upload_image_span_data = '<img src="' + scope1 + '/content/profiles/' + scope2 + '/avatar/' + scope3 + '"     class="new_profile_save_upload_image_img">';
$('.new_profile_save_upload_image_span').empty();
$('.new_profile_save_upload_image_span').append(new_profile_save_upload_image_span_data);

</script>

alert（data）似乎没有弹出，因此在执行之前有一些错误。

我只是用'submit.php'尝试了这段代码，但是如果没有'files'，它似乎无法工作。

我的文件名也正确吗？ 文件的文件名应该在php中是$ file ['name']吗？ 我正在尝试将文件名作为字符串获取，并将其放置在默认图像（作为要显示的图像）时，使用img html标签并通过jquery插入它，如您在底部底部所见。

Ajax应该在底部执行此脚本，但这不是由于错误。

还有没有更好的方式来编写我编写的底部jquery脚本？

我得到的错误：

ERRORS: Syntax Error: Unexpected Token < in JSON at position 103

提前致谢。

Answer 1

如果要同时返回JSON和HTML，则可以将HTML放入$data数组的元素中。

<?php 

// get mysqli db connection string
$mysqli = new mysqli("localhost", "psych_admin", "asd123", "psych");
if($mysqli->connect_error){
    exit('Error db');
}

// Get theme settings and theme colours and assign the theme colour to the 
theme name
$stmt = $mysqli->prepare("SELECT name FROM user_profiles WHERE rowid=(SELECT 
    MAX(rowid) FROM user_profiles);");
$stmt->execute();
$result = $stmt->get_result();
while($row_1 = $result->fetch_assoc())
{
    $arr_1[] = $row_1;
}
foreach($arr_1 as $arrs_1)
{
    $username = $arrs_1['name'];
}

$data = array();

if(isset($_GET['files']))
{  
    $error = false;
    $files = array();

    // Make dir for file uploads to be held
    if (!file_exists(''.dirname(__FILE__) . '/content/profiles/'.$username.'/avatar')) 
    {
        mkdir(''.dirname(__FILE__) . '/content/profiles/'.$username.'/avatar', 0777, true);
    }
    $uploaddir = './content/profiles/'.$username.'/avatar/';
    foreach($_FILES as $file)
    {
        if(move_uploaded_file($file['tmp_name'], $uploaddir .basename($file['name'])))
        {
            $files[] = $uploaddir .$file['name'];
        }
        else
        {
            $error = true;
        }
    }
    $data = ($error) ? array('error' => 'There was an error uploading your files') : array('files' => $files);
}
else
{
    $data = array('success' => 'Form was submitted', 'formData' => $_POST);
    $data['html'] = <<<EOS
<script>
var scope1 = '$url_root';
var scope2 = '$username';
var scope3 = '{$file['name']}';
var new_profile_save_upload_image_span_data = '<img src="' + scope1 + '/content/profiles/' + scope2 + '/avatar/' + scope3 + '"     class="new_profile_save_upload_image_img">';
\$('.new_profile_save_upload_image_span').empty();
\$('.new_profile_save_upload_image_span').append(new_profile_save_upload_image_span_data);

</script>
EOS;

}

echo json_encode($data);

?>

然后在JavaScript中执行以下操作：

script = $(data.html).text();

Answer 2

最好在PHP代码中使用try-catch块，并在响应设置为true或false的情况下发送状态。 另外，在JSON对象中发送$url_root和$username变量。

请参阅有关使用PHP和AJAX进行图像上传的初学者指南，以了解有关创建AJAX处理程序，验证，保存并将响应发送回客户端的所有信息。