jQuery AJAX przesyłanie pliku PHP

159

Chcę zaimplementować proste przesyłanie plików na mojej stronie intranetowej przy możliwie najmniejszej konfiguracji.

To jest moja część HTML:

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

a to jest mój skrypt jquery JS:

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

W katalogu głównym witryny znajduje się folder o nazwie „uploads”, z uprawnieniami do zmiany dla „users” i „IIS_users”.

Kiedy wybieram plik z formularzem plikowym i naciskam przycisk przesyłania, pierwszy alert zwraca „[object FormData]”. drugi alert nie jest wywoływany, a folder „przesłane” też jest pusty !?

Czy ktoś może pomóc mi dowiedzieć się, co jest nie tak?

Następnym krokiem powinno być również zmiana nazwy pliku na nazwę wygenerowaną po stronie serwera. Może ktoś też da mi na to rozwiązanie.

— user2355509
źródło

Przeczytaj to najpierw: stackoverflow.com/questions/166221/ ...

— Vincent Decaux

U mnie wszystko działa, może to Twój kod PHP?

— Korikulum

nic innego nie jest „związane” z tym formularzem. co masz na myśli mówiąc o moim kodzie php?

— user2355509

Chodzi mi o to, że twój kod działa, może problem tkwi w kodzie po stronie serwera.

— Korikulum

Czy otrzymujesz kod błędu 500 po wykonaniu skryptu AJAX? Oznaczałoby to, że jest to błąd po stronie serwera. Ponadto: upewnij się, że podczas debugowania wypisujesz odpowiedź pliku PHP na konsolę. W ten sposób, jeśli Twój kod PHP generuje błąd, wiesz, co się dzieje.

— Diederik

285

Potrzebujesz skryptu działającego na serwerze, aby przenieść plik do katalogu uploads. Metoda jQuery ajax(uruchomiona w przeglądarce) wysyła dane formularza na serwer, a następnie skrypt na serwerze obsługuje przesyłanie. Oto przykład użycia PHP.

Twój kod HTML jest w porządku, ale zaktualizuj skrypt JS jQuery, aby wyglądał tak:

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

A teraz czas na skrypt po stronie serwera, w tym przypadku używając PHP.

upload.php : skrypt PHP, który działa na serwerze i kieruje plik do katalogu uploads:

<?php

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

?>

Kilka rzeczy na temat katalogu docelowego:

Upewnij się, że masz poprawną ścieżkę serwera , tj. Zaczynając od lokalizacji skryptu PHP, jaka jest ścieżka do katalogu uploads, i
Upewnij się, że można go zapisać .

I trochę o funkcji PHP move_uploaded_file, używanej w skrypcie upload.php :

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']to nazwa wysyłanego pliku. Nie musisz tego używać. Możesz nadać plikowi dowolną nazwę (zgodną z systemem plików serwera):

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

I wreszcie, bądź świadomy swoich wartości konfiguracyjnych PHP upload_max_filesizeORAZ post_max_sizei upewnij się, że pliki testowe ich nie przekraczają. Oto pomoc, jak sprawdzić konfigurację PHP i ustawić maksymalny rozmiar pliku i ustawienia postów .

— bloodyKnuckles
źródło

hej BloodyKnuckles! dzięki, myślę, że to była jedna wielka rzecz, źle zrozumiałem. Dodałem więc plik php, a teraz jestem trochę bliżej. Pojawia się również drugi alert! ale folder jest nadal pusty.

— user2355509

Ach, nazwa wejściowa formularza „sortpic” zostaje zmieniona na „plik” w form_data.appendfunkcji. Więc zmieniłem skrypt PHP, aby odzwierciedlał nową nazwę wejściową formularza. Wyciągnąłem również odpowiedź skryptu PHP do alertu o sukcesie Ajax, aby pomóc w debugowaniu.

— bloodyKnuckles

1

Kolego, to daje mi błąd w pliku indeksu undefined pod adresem$_FILES['file']

— Hendry Tanaka

1

@partho, kod prop ('files') [0] uzyskuje dostęp do lokalnego pliku przeznaczonego do przesłania na serwer. Jeśli potrzebujesz więcej wyjaśnień, poszukaj funkcji jQuery „prop” i „HTML5 file upload”.

— bloodyKnuckles

1

Rozwiązałem ten problem, ponieważ rozmiar pliku był zbyt duży.

— 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
źródło

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
źródło

0

a to jest plik php, który ma otrzymać uaktualnione pliki

<?
$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
źródło

Co to if (true)robi? Czy wartościowanie zawsze jest prawdziwe, więc jest bezużyteczne, prawda? Masz również dodatkowe kręcone zakończenie.

— Pan Web

Naprawiłem to dla ciebie. :)

— Mr.Web

0

Użyj czystego 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)

Rozwiń fragment

Nazwa pliku jest automatycznie dołączana do żądania i serwer może ją odczytać, „typ zawartości” jest automatycznie ustawiany na „multipart / form-data”. Tutaj jest bardziej rozwinięty przykład z obsługą błędów i dodatkowym wysyłaniem json

Pokaż fragment kodu

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>

Rozwiń fragment

— Kamil Kiełczewski
źródło

-1

Najlepsze przesyłanie plików przy użyciu Jquery Ajax z Materialize Kliknij tutaj, aby pobrać

Po wybraniu obrazu obraz zostanie przekonwertowany do bazy 64 i możesz go przechowywać w bazie danych, aby był również lekki.

— Urshit Sheth
źródło