it-swarm.com.de

jQuery AJAX Datei-Upload PHP

Ich möchte ein einfaches Hochladen von Dateien in meine 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 jquery script:

$("#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"); 
        }
    });
});

Es gibt einen Ordner mit dem Namen "uploads" im Stammverzeichnis der Website mit Änderungsberechtigungen für "users" und "IIS_users".

Wenn ich eine Datei mit dem Datei-Formular auswähle und den Upload-Button drücke, gibt die erste Warnung "[object FormData]" zurück. Der zweite Alert wird nicht aufgerufen und der Ordner "uploads" ist auch 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.

137
user2355509

Sie benötigen ein Skript, das auf dem Server ausgeführt wird, um die Datei in das Upload-Verzeichnis zu verschieben. Die Methode jQuery ajax (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-Code ist in Ordnung, aber aktualisieren Sie Ihr JS-jQuery-Skript folgendermaßen:

_$('#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']);
    }

?>
_

Auch ein paar Dinge über das Zielverzeichnis:

  1. Stellen Sie sicher, dass Sie den korrekten Serverpfad haben, dh beginnend am Skriptpfad PHP, in dem sich der Pfad zum Upload-Verzeichnis befindet. und
  2. Stellen Sie sicher, dass es beschreibbar ist .

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

_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 geben (Server-Dateisystem kompatibel):

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

Beachten Sie zum Schluss Ihre PHP upload_max_filesize AND post_max_size Konfigurationswerte, und stellen Sie sicher, dass Ihre Testdateien dies nicht tun entweder überschreiten. Hier ist einige Hilfe, wie Sie überprüfen Sie PHP Konfiguration und wie Sie Festlegen der maximalen Dateigröße und Post-Einstellungen .

256
bloodyKnuckles
**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" />';
}
1
Hasib Kamal
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);
    }
});
1
Azhar

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 Anfrage hinzugefügt und der Server kann ihn lesen, der 'Inhaltstyp' wird automatisch auf 'Mehrteilig/Formulardaten' gesetzt. Hier ist ein ausführlicheres Beispiel mit Fehlerbehandlung und zusätzlichem Json-Senden

async function saveFile(inp) 
{
    let user = { name:'john', age:34 };
    let formData = new FormData();
    let photo = inp.files[0];      
         
    formData.append("photo", photo);
    formData.append("user", JSON.stringify(user));  
    
    try {
       let r = await fetch('/upload/image', {method: "POST", body: formData}); 
       console.log('HTTP response code:',r.status); 
       alert('success');
    } catch(e) {
       console.log('Huston we have problem...:', e);
    }
    
}
<input type="file" onchange="saveFile(this)" >
<br><br>
Before selecting the file Open chrome console > network tab to see the request details.
<br><br>
<small>Because in this example we send request to https://stacksnippets.net/upload/image the response code will be 404 ofcourse...</small>
0

und dies ist die PHP-Datei, um die hochgeladenen Dateien zu erhalten

<?
$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);
?>
0
kavehmb