jQuery AJAX Datei hochladen PHP

159

Ich möchte einen einfachen Datei-Upload in meiner Intranetseite mit dem kleinstmöglichen Setup implementieren.

Dies ist mein HTML-Teil:

<input id="sortpicture" type="file" name="sortpic" />
<button id="upload">Upload</button>

und das ist mein JS-Abfrageskript:

$("#upload").on("click", function() {
    var file_data = $("#sortpicture").prop("files")[0];   
    var form_data = new FormData();
    form_data.append("file", file_data);
    alert(form_data);
    $.ajax({
        url: "/uploads",
        dataType: 'script',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(){
            alert("works"); 
        }
    });
});

Im Stammverzeichnis der Website befindet sich ein Ordner mit dem Namen "Uploads" mit Änderungsberechtigungen für "Benutzer" und "IIS_Benutzer".

Wenn ich eine Datei mit dem Dateiformat auswähle und die Upload-Taste drücke, gibt die erste Warnung "[Objekt FormData]" zurück. Die zweite Warnung wird nicht aufgerufen und der Ordner "Uploads" ist ebenfalls leer!?

Kann mir jemand helfen, herauszufinden, was falsch ist?

Der nächste Schritt sollte auch sein, die Datei mit einem serverseitig generierten Namen umzubenennen. Vielleicht kann mir auch jemand eine Lösung dafür geben.

user2355509
quelle
Bitte lesen Sie dies zuerst: stackoverflow.com/questions/166221/…
Vincent Decaux
Alles funktioniert für mich, vielleicht ist es Ihr PHP-Code?
Korikulum
Mit diesem Formular ist nichts anderes "verbunden". Was meinst du mit meinem PHP-Code?
user2355509
Was ich meine ist, Ihr Code funktioniert, vielleicht liegt das Problem in Ihrem serverseitigen Code.
Korikulum
Erhalten Sie beim Ausführen des AJAX-Skripts einen 500-Fehlercode? Dies würde darauf hinweisen, dass es sich um einen serverseitigen Fehler handelt. Außerdem: Stellen Sie sicher, dass Sie beim Debuggen die Antwort der PHP-Datei an die Konsole ausgeben. Auf diese Weise wissen Sie, was los ist, wenn Ihr PHP-Code einen Fehler auslöst.
Diederik

Antworten:

285

Sie benötigen ein Skript, das auf dem Server ausgeführt wird, um die Datei in das Upload-Verzeichnis zu verschieben. Die jQuery- ajaxMethode (die im Browser ausgeführt wird) sendet die Formulardaten an den Server. Anschließend übernimmt ein Skript auf dem Server den Upload. Hier ist ein Beispiel mit PHP.

Ihr HTML ist in Ordnung, aber aktualisieren Sie Ihr JS jQuery-Skript so, dass es so aussieht:

$('#upload').on('click', function() {
    var file_data = $('#sortpicture').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file', file_data);
    alert(form_data);                             
    $.ajax({
        url: 'upload.php', // point to server-side PHP script 
        dataType: 'text',  // what to expect back from the PHP script, if anything
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,                         
        type: 'post',
        success: function(php_script_response){
            alert(php_script_response); // display response from the PHP script, if any
        }
     });
});

Und nun zum serverseitigen Skript, in diesem Fall mit PHP.

upload.php : Ein PHP-Skript, das auf dem Server ausgeführt wird und die Datei in das Upload-Verzeichnis leitet:

<?php

    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
    }

?>

Außerdem ein paar Dinge über das Zielverzeichnis:

  1. Stellen Sie sicher, dass Sie den richtigen Serverpfad haben , dh beginnend am Speicherort des PHP-Skripts den Pfad zum Upload-Verzeichnis und
  2. Stellen Sie sicher, dass es beschreibbar ist .

Und ein bisschen über die PHP-Funktion move_uploaded_file, die im Skript upload.php verwendet wird :

move_uploaded_file(

    // this is where the file is temporarily stored on the server when uploaded
    // do not change this
    $_FILES['file']['tmp_name'],

    // this is where you want to put the file and what you want to name it
    // in this case we are putting in a directory called "uploads"
    // and giving it the original filename
    'uploads/' . $_FILES['file']['name']
);

$_FILES['file']['name']ist der Name der Datei beim Hochladen. Das musst du nicht benutzen. Sie können der Datei einen beliebigen Namen (Server-Dateisystem-kompatibel) geben:

move_uploaded_file(
    $_FILES['file']['tmp_name'],
    'uploads/my_new_filename.whatever'
);

Beachten Sie schließlich Ihre PHP- upload_max_filesizeUND post_max_sizeKonfigurationswerte und stellen Sie sicher, dass Ihre Testdateien auch diese nicht überschreiten. Hier finden Sie einige Hilfestellungen zum Überprüfen der PHP-Konfiguration und zum Festlegen der maximalen Dateigröße und der Post-Einstellungen .

blutige Knöchel
quelle
hey BloodyKnuckles! Danke, ich denke das war eine große Sache, die ich falsch verstanden habe. Also habe ich die PHP-Datei hinzugefügt und jetzt bin ich ein bisschen näher. Die zweite Warnung erscheint ebenfalls! Der Ordner ist jedoch noch leer.
user2355509
Ah, der Formulareingabenname "sortpic" wird in der form_data.appendFunktion in "file" geändert . Also habe ich das PHP-Skript geändert, um den neuen Namen der Formulareingabe wiederzugeben. Ich habe auch die PHP-Skriptantwort in die Ajax-Erfolgswarnung gezogen, um beim Debuggen zu helfen.
BloodyKnuckles
1
Buddy, es gibt mir Fehler undefinierte Indexdatei bei$_FILES['file']
Hendry Tanaka
1
@partho, der Code prop ('files') [0] greift auf die lokale Datei zu, die zum Hochladen auf den Server vorgesehen ist. Wenn Sie weitere Erklärungen benötigen, schlagen Sie die jQuery-Funktionen "prop" und "html5 file upload" nach.
BloodyKnuckles
1
Ich habe dieses Problem behoben. Der Grund dafür war, dass die Dateigröße zu groß war.
Ron Tornambe
4
**1. index.php**
<body>
    <span id="msg" style="color:red"></span><br/>
    <input type="file" id="photo"><br/>
  <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      $(document).on('change','#photo',function(){
        var property = document.getElementById('photo').files[0];
        var image_name = property.name;
        var image_extension = image_name.split('.').pop().toLowerCase();

        if(jQuery.inArray(image_extension,['gif','jpg','jpeg','']) == -1){
          alert("Invalid image file");
        }

        var form_data = new FormData();
        form_data.append("file",property);
        $.ajax({
          url:'upload.php',
          method:'POST',
          data:form_data,
          contentType:false,
          cache:false,
          processData:false,
          beforeSend:function(){
            $('#msg').html('Loading......');
          },
          success:function(data){
            console.log(data);
            $('#msg').html(data);
          }
        });
      });
    });
  </script>
</body>

**2.upload.php**
<?php
if($_FILES['file']['name'] != ''){
    $test = explode('.', $_FILES['file']['name']);
    $extension = end($test);    
    $name = rand(100,999).'.'.$extension;

    $location = 'uploads/'.$name;
    move_uploaded_file($_FILES['file']['tmp_name'], $location);

    echo '<img src="'.$location.'" height="100" width="100" />';
}
Hasib Kamal
quelle
2
var formData = new FormData($("#YOUR_FORM_ID")[0]);
$.ajax({
    url: "upload.php",
    type: "POST",
    data : formData,
    processData: false,
    contentType: false,
    beforeSend: function() {

    },
    success: function(data){




    },
    error: function(xhr, ajaxOptions, thrownError) {
       console.log(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
});
Azhar
quelle
0

und dies ist die PHP-Datei, um die aktualisierten Dateien zu empfangen

<?
$data = array();
    //check with your logic
    if (isset($_FILES)) {
        $error = false;
        $files = array();

        $uploaddir = $target_dir;
        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' => 'NO FILES ARE SENT','formData' => $_REQUEST);
    }

    echo json_encode($data);
?>
kavehmb
quelle
Was ist das if (true)? Ist es immer wahr, also ist es nutzlos, nicht wahr? Sie haben auch eine zusätzliche End-Curly.
Mr.Web
Ich habe es für dich repariert. :)
Mr.Web
0

Verwenden Sie reine js

async function saveFile() 
{
    let formData = new FormData();           
    formData.append("file", sortpicture.files[0]);
    await fetch('/uploads', {method: "POST", body: formData});    
    alert('works');
}
<input id="sortpicture" type="file" name="sortpic" />
<button id="upload" onclick="saveFile()">Upload</button>
<br>Before click upload look on chrome>console>network (in this snipped we will see 404)

Der Dateiname wird automatisch zur Anforderung hinzugefügt und der Server kann ihn lesen. Der 'Inhaltstyp' wird automatisch auf 'Mehrteil- / Formulardaten' gesetzt. Hier ist ein weiter entwickeltes Beispiel mit Fehlerbehandlung und zusätzlichem JSON-Senden

Kamil Kiełczewski
quelle
-1

Bester Datei-Upload mit Jquery Ajax mit Materialise Klicken Sie hier, um ihn herunterzuladen

Wenn Sie ein Bild auswählen, wird das Bild in Basis 64 konvertiert und Sie können es in einer Datenbank speichern, damit es auch leicht ist.

Urshit Sheth
quelle