显示ajax结果数据保存

时间:2014-01-30 01:40:02

标签: javascript php jquery ajax

我正在使用数据&用ajax保存的文件表单。我按照这篇文章uploading-both-data-and-files-in-one-form-using-ajax工作得很好,数据保存在数据库中,文件(图像)存储在他的文件夹中。唯一的事情是,当一切都没问题时,我不能让它显示“成功”或者当出现问题时显示“错误”...它总是显示“已执行加载”。但它显示因为我插入了这个但是当里面有错误时它没有显示错误...总是“加载已执行。”

我在插入代码中发出错误或成功模式消息,我将<?php echo $alert; ?>放在表单页面中,但消息没有出现...

你能解决我的问题吗?

如果可以显示加载器(在gif中)也会更好..

这里显示代码:

JS:

$("form#data").submit(function(){   
    var formData = new FormData($(this)[0]);    
    $.ajax({
        url: "includes/galeria.php?ts=" + new Date().getTime(),
        type: 'POST',
        data: formData,
        async: false,
        success: function(data) {
 $('.result').html(data);
 alert('Load was performed.');
        },
        cache: false,
        contentType: false,
        processData: false
    }); 
    return false;
});

galeria.php:

<?php 
    require_once("connection.php");
    require_once("settings.php");
    $alert = "";
    if(isset($_FILES['imgaleria'])) {
        $extension = pathinfo($_FILES['imgaleria']['name']);
        $extension = $extension["extension"];
        $allowed_paths = explode(", ", $allowed_ext);
        $valid = 0;
        for($i = 0; $i < count($allowed_paths); $i++) {
            if ($allowed_paths[$i] == "$extension") {
                $valid = 1;
            }
        }
        if ($valid == 1 && $_FILES["imgaleria"]["size"] <= $max_weight) {
            if (file_exists("../assets/img/galeria/" . $_FILES["imgaleria"]["name"])) {
                $alert = '<p class="error">' . $_FILES["imgaleria"]["name"] . ' El nombre del archivo ya existe!' . '</p>';
            } else {
                move_uploaded_file($_FILES["imgaleria"]["tmp_name"], "../assets/img/galeria/" . $_FILES["imgaleria"]["name"]);
                $save = $_FILES["imgaleria"]["name"];
                $statement = $conn->prepare("INSERT INTO GALERIA (imgtitulo, imgdescripcion, imgcategoria, imgaleria) VALUES (?, ?, ?, ?)");
                if ($statement->execute(array($_POST['imgtitulo'],$_POST['imgdescripcion'],$_POST['imgcategoria'],$save))); 
                $dbSuccess = true; 
                $alert = '<p class="ok">' . ' Oferta agregada satisfactoriamente!' . '</p>';
                $dbh = null;
            }
        } else {
            $alert = '<p class="error">' . ' Tipo de archivo inv&aacute;lido!' . '</p>';
        }
    }
?>

表单page.php:

    <form class="form-horizontal" id="data" name="data" method="post" enctype="multipart/form-data">
        <fieldset>
            <?php echo $alert; ?>
            <div class="control-group">
                <label class="control-label col-md-4"><?php echo $translate->__('Image title'); ?> :</label>
                <div class="col-md-5">
                    <input type="text" class="form-control" name="imgtitulo" />
                </div>
            </div>
            <div class="control-group">
                <label class="control-label col-md-4"><?php echo $translate->__('Image description'); ?> :</label>
                <div class="col-md-5">
                    <textarea id="maxlength_textarea" class="form-control" maxlength="225" name="imgdescripcion" /></textarea>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label col-md-4"><?php echo $translate->__('Image category'); ?> :</label>
                <div class="col-md-5">
                    <input type="text" class="form-control" name="imgcategoria" />
                </div>
            </div>                  
            <div class="control-group">
                <label class="control-label col-md-4"><?php echo $translate->__('File to upload'); ?> :</label>
                <div class="col-md-3">
                    <input name="imgaleria" type="file" />
                </div>
            </div>
            <div class="control-group">
                <div class="row">
                    <div class="col-md-12">
                        <div class="col-sd-offset-9 col-md-12"><br />
                            <button class="btn btn-info" name="enviar"><i class="fa fa-check"></i> <?php echo $translate->__('Save'); ?></button>
                        </div>
                    </div>
                </div>
            </div>          
        </fieldset>
    </form>
    <div id="loading" style="display:none;"><img src="assets/img/ajax_loader.gif" /></div>

1 个答案:

答案 0 :(得分:0)

您误解了PHP,HTML和JQuery(javascript)之间的关系。

在将任何HTML输出到浏览器之前,PHP在服务器上执行。加载页面后,您无法执行ajax调用,然后使用PHP打印该调用。别这么想。相反,您需要使用JQuery操作HTML。

所以这个JQuery代码是正确的:

success: function(data) {
  $('.result').html(data);
}

但是你需要在页面上使用class =“result”的HTML元素才能使用:

<div class="result">RESULT APPEARS HERE AFTER AJAX CALL</div>

您实际上应该定位ID而不是类,因此我会使用#result代替.resultid="result"而不是class="result"。请阅读有关PHP和Javascript交互的初学者书籍,因为您需要在开始之前了解基础知识。