使用Ajax,Jquery进行文件上传

时间:2018-08-28 10:41:13

标签: javascript php jquery ajax

对于编码而言相对较新,但是仍然存在一些问题。我的主要问题基本上是,我选择上传的文件没有最终出现在服务器上的toimport文件夹中,尽管该功能显示成功。如果您可能知道此问题的解决方案,请提供帮助。

Upload_form.php中的脚本:

<script>
// Wir registrieren einen EventHandler für unser Input-Element (#uploadFile)
// wenn es sich ändert
$('body').on('change', '#uploadFile', function() {
    var data = new FormData(); // das ist unser Daten-Objekt ...
    data.append('file', this.files[0]); // ... an die wir unsere Datei anhängen
    $.ajax({
        url: 'upload.php', // Wohin soll die Datei geschickt werden?
        data: data,          // Das ist unser Datenobjekt.
        type: 'POST',         // HTTP-Methode, hier: POST
        processData: false,
        contentType: false,
        // und wenn alles erfolgreich verlaufen ist, schreibe eine Meldung
        // in das Response-Div
        success: function() { $("#responses").append("Datei erfolgreich hochgeladen");
        }
    });
});
</script>

upload.php

$target_dir = "toimport/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$FileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));

// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}

// Allow certain file formats
if($FileType != "xlsx" && $FileType != "xls" && $FileType != "csv"
    && $FileType != "gif" ) {
    echo "Sorry, only XLSX, XLS & CSV files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"],     $target_file)) {
    echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
} else {
    echo "Sorry, there was an error uploading your file.";
    }
}

1 个答案:

答案 0 :(得分:0)

  1. 您需要在 $(document).ready(function(){...}) $(function(){...})中编写jQuery >
  2. enctype: 'multipart/form-data', 至$ .ajax
  3. $ _ FILES [“ file”] ,而不是$ _FILES [“ fileToUpload”]

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
    <script>
        $(function () {
            $('body').on('change', '#uploadFile', function () {
                console.log('asdfsadfa');
                var file_data = $('#uploadFile').prop('files')[0];
                var form_data = new FormData();
                form_data.append('file', file_data);
                $.ajax({
                    url: "upload.php",
                    type: "POST",
                    data: form_data,
                    contentType: false,
                    cache: false,
                    enctype: 'multipart/form-data',
                    processData: false,
                    success: function (data) {
                        console.log(data);
                        $("#responses").append("Datei erfolgreich hochgeladen");
                    }
                });
            });
        })
    </script>
</head>

<body>
    <input type="file" id="uploadFile" />
    <div id="responses"></div>
</body>

</html>

PHP代码:

<?php

$target_dir = "toimport/";

$target_file = $target_dir . basename($_FILES["file"]["name"]);
$uploadOk = 1;
$FileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));

// Check if file already exists
if (file_exists($target_file)) {
    echo "Sorry, file already exists.";
    $uploadOk = 0;
}

// Allow certain file formats
if ($FileType != "xlsx" && $FileType != "xls" && $FileType != "csv"
    && $FileType != "gif") {
    echo "Sorry, only XLSX, XLS & CSV files are allowed.";
    $uploadOk = 0;
}
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
    echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
    if (move_uploaded_file($_FILES["file"]["tmp_name"], $target_file)) {
        echo "The file ". basename($_FILES["file"]["name"]). " has been uploaded.";
    } else {
        echo "Sorry, there was an error uploading your file.";
    }
}