使用ajax上传文件然后列出它们

时间:2017-02-14 23:36:54

标签: javascript php jquery html ajax

因为我在标题中写道,我的目标是通过AJAX上传文件并返回上传到div中的元素。

这是表单HTML:

<form method="post" action="add.php" enctype="multipart/form-data" id="form-add">
        <input type="file" name="file" /><br />
        <button type="submit">Envoyer</button>
</form>

这是我在PHP中用来制作AJAX请求的痕迹

if (isAjax()){
    $dir_ext_img = 'img/type_files';
    $req = $pdo->prepare('SELECT * FROM upload WHERE idU= ? ORDER BY idF DESC');
    $req->execute([$idU]);
    $file_being_up = $req->fetch();
    ?>
       <div class="element_upload <?= $file_being_up->idF; ?>">
            <img src="<?= $dir_ext_img .'/'. $file_being_up->extension; ?>.svg">
            <a href="<?=$file_being_up->dir; ?>" class='name_file' target='_blank'><?= $file_being_up->nameF.'.'.$file_being_up->extension ; ?></a>
            <a href="delete.php?idF=<?= $file_being_up->idF; ?>" class='delete'>Supprimer</a>
      </div>
   <?php
} else{
      header('Location: account.php');
}

这是函数isAjax代码:

function isAjax(){
   return isset($_SERVER['HTTP_X_REQUESTES_WITH']) && $_SERVER['HTTP_X_REQUESTES_WITH'] == 'XMLHttpRequest';
 }

这是我在jQuery中的脚本JS:

$('#form-add').on('submit', function (e) {
        e.preventDefault();
        var $form = $(this);
        var formdata = (window.FormData) ? new FormData($form[0]) : null;
        var data = (formdata !== null) ? formdata : $form.serialize();
        var url = $form.attr('action');
        $form.find('button').text('Chargement...');
    $.ajax({
        url: url,
        type: $form.attr('method'),
        contentType: false, 
        processData: false, 
        data: data })
        .done(function(data, text, jqxhr){
            $('.container').prepend(jqxhr.responseText);
            $form.find('button').text('Envoyer');

         });
});

问题在于我没有得到我在脚本PHP中创建的div的响应,但是我收到了一个内部包含新div的完整页面。 而我只想在PHP中创建前面的div,将它放在我想要的页面上。  是否有人知道如何在上传文件的情况下使用新的div?

0 个答案:

没有答案