Drukowana wersja tematu

Kliknij tu, aby zobaczyć temat w orginalnym formacie

Forum PHP.pl _ JavaScript _ Jak przekazać zdjęcia z formularza do posta? JS-PHP

Napisany przez: Cuncello 10.08.2020, 20:18:31

Witajcie, mam problem, którego nie potrafię rozwiązać. Wygląda to tak, że mam formularz w html, który jest wysyłany postem. W nim są wysyłanie różne inputy tekstowe ALE również zdjęcia.
Formularz musi pokazywać wybrane zdjęcia, mieć możliwość usunięcia i dogrania.
Pod linkiem możecie zobaczyć jak to wygląda i działa:
https://fck-auto.de/ankaufahrzeuge/

Formularz generuje zdjęcia w generowanych folderach, bo klient chciał mieć generowaną galerie z załączników do każdego maila... W mailu przychodzą dane z inputów i link do galerii.
Nie potrafię przekazać zdjęć z skryptu js do php. Patrzę na ten kod i już nie ogarniam.

KOD PONIŻEJ:

CZĘŚĆ FORMULARZA

[HTML] pobierz, plaintext 
  1.  <http://december.com/html/4/element/form.html id="contact" action="../form/sendmemail.php" method="post" enctype="multipart/form-data"> 
  2.  
  3.             <http://december.com/html/4/element/fieldset.html>
  4.                 <http://december.com/html/4/element/span.html>Dodaj zdjęcia (max 20 sztuk na jeden raz) *</http://december.com/html/4/element/span.html>
  5.                         <http://december.com/html/4/element/div.html class="files" id="files1">                         
  6.                               <http://december.com/html/4/element/input.html type="file" name="upload[]"  multiple="multiple" enctype="multipart/form-data" />                         
  7.                             <http://december.com/html/4/element/br.html />
  8.                             <http://december.com/html/4/element/ul.html class="fileList"></http://december.com/html/4/element/ul.html>
  9.                         </http://december.com/html/4/element/div.html>
  10.  
  11.                         <http://december.com/html/4/element/div.html class="row">
  12.                             <http://december.com/html/4/element/div.html class="span16">
  13.  
  14.                                 <http://december.com/html/4/element/table.html class="zebra-striped"><http://december.com/html/4/element/tbody.html class="files"></http://december.com/html/4/element/tbody.html></http://december.com/html/4/element/table.html>
  15.                             </http://december.com/html/4/element/div.html>
  16.                         </http://december.com/html/4/element/div.html>
  17.                     <http://december.com/html/4/element/a.html href="https://fck-auto.de/ankaufahrzeuge/foto/">Zobacz jak powinny wyglądać zdjęcia do wyceny</http://december.com/html/4/element/a.html>
  18.  
  19.  
  20.                 </http://december.com/html/4/element/fieldset.html>
  21.  
  22. </http://december.com/html/4/element/form.html>
[HTML] pobierz, plaintext





FORMULARZ POZWALA DODAWAĆ I USUWAĆ PLIKI PRZED PRZESŁANIEM:

[HTML] pobierz, plaintext 
  1. $.fn.fileUploader = function (filesToUpload, sectionIdentifier) {
  2.     var fileIdCounter = 0;
  3.  
  4.     this.closest(".files").change(function (evt) {
  5.         var output = [];
  6.  
  7.         for (var i = 0; i < evt.target.files.length; i++) {
  8.             fileIdCounter++;
  9.             var file = evt.target.files[i];
  10.             var fileId = sectionIdentifier + fileIdCounter;
  11.  
  12.             filesToUpload.push({
  13.                 id: fileId,
  14.                 file: file
  15.             });
  16.  
  17.             var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + fileId + "\">Remove</http://december.com/html/4/element/a.html>";
  18.  
  19.             output.push("<http://december.com/html/4/element/li.html><http://december.com/html/4/element/strong.html>", escape(file.name), "</http://december.com/html/4/element/strong.html> - ", file.size, " bytes. &nbsp; &nbsp; ", removeLink, "</http://december.com/html/4/element/li.html> ");
  20.         };
  21.  
  22.         $(this).children(".fileList")
  23.             .append(output.join(""));
  24.  
  25.         //reset the input to null - nice little chrome bug!
  26.         evt.target.value = null;
  27.     });
  28.  
  29.     $(this).on("click", ".removeFile", function (e) {
  30.         e.preventDefault();
  31.  
  32.         var fileId = $(this).parent().children("a").data("fileid");
  33.  
  34.         // loop through the files array and check if the name of that file matches FileName
  35.         // and get the index of the match
  36.         for (var i = 0; i < filesToUpload.length; ++i) {
  37.             if (filesToUpload[i].id === fileId)
  38.                 filesToUpload.splice(i, 1);
  39.         }
  40.  
  41.         $(this).parent().remove();
  42.     });
  43.  
  44.     this.clear = function () {
  45.         for (var i = 0; i < filesToUpload.length; ++i) {
  46.             if (filesToUpload[i].id.indexOf(sectionIdentifier) >= 0)
  47.                 filesToUpload.splice(i, 1);
  48.         }
  49.  
  50.         $(this).children(".fileList").empty();
  51.     }
  52.  
  53.     return this;
  54. };
  55.  
  56. (function () {
  57.     var filesToUpload = [];
  58.  
  59.     var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");
  60.  
  61.     $("#uploadBtn").click(function (e) {
  62.         e.preventDefault();
  63.  
  64.         var formData = new FormData();
  65.  
  66.         for (var i = 0, len = filesToUpload.length; i < len; i++) {
  67.             formData.append("files", filesToUpload[i].file);
  68.         }
  69.  
  70.         $.ajax({
  71.             data: formData,
  72.             processData: false,
  73.             contentType: false,
  74.             type: "POST",
  75.             success: function (data) {
  76.  
  77.             },
  78.             error: function (data) {
  79.                 alert("ERROR - " + data.responseText);
  80.             }
  81.         });
  82.     });
  83. })()
[HTML] pobierz, plaintext



PLIKI Z FORMULARZA IDĄ TUTAJ:

[PHP] pobierz, plaintext 
  1. <?php http://www.php.net/session_start();
  2. if(http://www.php.net/isset($_POST['submit'])) {
  3.     $youremail = 'm.szkubiel@e-intermedia.pl';
  4.     $fromsubject = 'Temat wiadomości';
  5.     $name = $_POST['rodzaj_pojazdu'];
  6.     $mail = $_POST['email'];
  7.     $subject = $_POST['subject']; 
  8.     $message = $_POST['rok_produkcji']; 
  9.     $poj_silnika = $_POST['poj_silnika']; 
  10.     $moc_silnika = $_POST['moc_silnika']; 
  11.     $przebieg = $_POST['przebieg'];
  12.     $lokalizacja = $_POST['lokalizacja'];
  13.     $przeglad = $_POST['przeglad'];
  14.     $liczba_wlascicieli = $_POST['liczba_wlascicieli'];
  15.     $message = $_POST['message'];
  16.     $tel = $_POST['tel'];
  17.     $adres_emai = $_POST['adres_emai'];
  18.     $message_uwagi = $_POST['message_uwagi'];
  19.  
  20.     $skrzynia_biegow = $_POST['skrzynia_biegow'];
  21.     $naped = $_POST['naped'];
  22.     $drugi_komplet_kol = $_POST['drugi_komplet_kol'];
  23.  
  24.     $wyposazenie = http://www.php.net/implode(', ', $_POST['wyposazenie']);
  25.     $typ_silnika = $_POST['typ_silnika'];
  26.  
  27.     if(http://www.php.net/count($_FILES['upload']['name']) > 0){
  28.  
  29.         $rand = http://www.php.net/rand();
  30.  
  31.         $createFolder = http://www.php.net/uniqid();
  32.         http://www.php.net/mkdir('uploads/'.$createFolder);
  33.  
  34.         for($i=0; $i<count($_FILES['upload']['name']); $i++) {
  35.  
  36.             $tmpFilePath = $_FILES['upload']['tmp_name'][$i];
  37.  
  38.             if($tmpFilePath != ""){
  39.  
  40.                 $shortname = $_FILES['upload']['name'][$i];
  41.                 $explode = http://www.php.net/explode(".", $_FILES['upload']['name'][$i]);
  42.                 $filePath = "uploads/".$createFolder. '/' . http://www.php.net/rand().'.'.$explode[1];
  43.  
  44.                 if(http://www.php.net/move_uploaded_file($tmpFilePath, $filePath)) {
  45.                     $files[] = $shortname;
  46.  
  47.                 }
  48.             }
  49.         }
  50.  
  51.     }
  52.  
  53.     $to = $youremail; 
  54.     $headers .= "Reply-To: Some One <".$_POST['name'].">\r\n"; 
  55.     $headers .= "Return-Path: Some One <".$_POST['name'].">\r\n"; 
  56.     $headers .= "From: Some One <".$_POST['name'].">\r\n"; 
  57.     $headers .= "Organization: FCK AUTO\r\n"; 
  58.     $headers .= "Content-Type: text/html\r\n"; 
  59.  
  60.     $mailsubject = $fromsubject;
  61.  
  62.     $body .= $fromsubject.'
  63.  
  64. <table>
  65.         <tr> <td> Rodzaj pojazdu: </td>  <td> '.$name.' </td> </tr>
  66.          <br>
  67.          <hr>
  68.          <tr> <td> Marka: </td>  <td>'.$mail.' 
  69.          <br>
  70.          <hr>
  71.          <tr> <td> Model: </td>  <td>'.$subject.' 
  72.          <br>
  73.          <hr>
  74.          <tr> <td> Rok produkcji: </td>  <td>'.$message.' 
  75.          <br>
  76.          <hr>
  77.          <tr> <td> Typ silnika: </td>  <td>'.$typ_silnika.' 
  78.          <br>
  79.          <hr>
  80.          <tr> <td> Pojemność silnika: </td>  <td>'.$poj_silnika.'
  81.          <br>
  82.          <hr>  
  83.          <tr> <td> Moc silnika:</td>  <td> '.$moc_silnika.'
  84.          <br>
  85.          <hr>
  86.          <tr> <td> Przebieg:</td>  <td> '.$przebieg.'
  87.          <br>
  88.          <hr>
  89.          <tr> <td> Skrzynia biegów: </td>  <td>'.$skrzynia_biegow.' 
  90.          <br>
  91.          <hr>
  92.          <tr> <td> Napęd: </td>  <td>'.$naped.' 
  93.          <br>
  94.          <hr>
  95.          <tr> <td> Drugi komplet kół:</td>  <td> '.$drugi_komplet_kol.' 
  96.          <br>
  97.          <hr>
  98.          <tr> <td> Lokalizacja: </td>  <td>'.$lokalizacja.' 
  99.          <br>
  100.          <hr>
  101.          <tr> <td> Przegląd: </td>  <td>'.$przeglad.'
  102.          <br>
  103.          <hr>
  104.          <tr> <td> Łączna liczba właścicieli: </td>  <td>'.$liczba_wlascicieli.' 
  105.          <br>
  106.          <hr>
  107.          <tr> <td> Uwagi dotyczące stani technicznego: </td>  <td>'.$message.' 
  108.          <br>
  109.          <hr>
  110.          <tr> <td> Wyposażenie: </td>  <td>'.$wyposazenie.' 
  111.          <br>
  112.          <hr>
  113.          <tr> <td> Telefon:</td>  <td> '.$tel.' 
  114.          <br>
  115.          <hr>
  116.          <tr> <td> Adres e-mail:</td>  <td> '.$adres_emai.'
  117.          <br>
  118.          <hr> 
  119.          <tr> <td> UWAGI:</td>  <td> '.$message_uwagi.' 
  120.          <br>
  121.          <hr>
  122.          <a href="https://fck-auto.de/form/galeria.php?upload=/'.$createFolder.'">LINK DO GALERII</a>
  123. <table>     
  124.     '; 
  125.  
  126.     http://www.php.net/echo "<div> Dziękujemy za przesłanie wiadomości, odezwiemy się w najbliższym czasie</div>
  127.         <div>Za chwilę nastąpi powrót do strony...</div>
  128.     "; 
  129.                                     http://www.php.net/mail($to, $subject, $body,$headers);
  130.      } else { 
  131.     http://www.php.net/echo "You must write a message. </br> Please go to <a href='/index.html'>Home Page</a>"; 
  132. }
  133. ?> 
  134.  
[PHP] pobierz, plaintext



NA SAM KONIEC FORMULARZ ZOSTAJE WYSŁANY Z WSZYSTKIMI DANYMI Z INPUTÓW OPRÓCZ ZDJĘĆ.

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)