Jak przekazać pliki z formularza do posta? JS-PHP

0

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:

HTML:

	<div class="container">	
		<form id="contact" action="../form/sendmemail.php" method="post" enctype="multipart/form-data">	
		<div class="nf-field-element">
			<div class="columnformone">
			<h1><div  style="color: green;">Skup aut online</div></h1>
				<div class="bordercolumnformone">
					<span style="background-color: rgba(255, 255, 255, 0.62); font-family: &quot;Open Sans&quot;, Arial, Tahoma, sans-serif; font-size: 18px; caret-color: rgb(0, 0, 0);">Sprzedaj swój samochód szybko i bezproblemowo. Wypełnij formularz i uzyskaj konkretną ofertę. Po akceptacji ceny przelejemy pieniądze na Twoje konto i odbierzemy samochód z podanej lokalizacji.
					</span><p></p>
				</div>
			</div>

			<div class="columnformone">
			<h1><div style="color: green;">Formularz wyceny</div></h1>
				<div class="bordercolumnformone">
					<span style="background-color: rgba(255, 255, 255, 0.62); font-family: &quot;Open Sans&quot;, Arial, Tahoma, sans-serif; font-size: 18px; caret-color: rgb(0, 0, 0);"> Czy to nie proste? Sprzedaż samochodu nigdy wcześniej nie była taka łatwa. Skupujemy wszystkie pojazdy więc nie czekaj i dokonaj darmowej wyceny już teraz.
					<br></span><br><p></p>
				</div>
			</div>
		</div>
								
			<fieldset id="field1">
				<label>Rodzaj pojazdu</label>
				  <select id="pole1" name="rodzaj_pojazdu" tabindex="1" >				
						<option value="osobowy">osobowy</option>	
						<option value="dostawczy">dostawczy</option>							
						<option value="ciarowy">ciężarowy</option>							
						<option value="autobus">autobus</option>							
						<option value="motocykl">motocykl</option>							
						<option value="przyczepanaczepa">przyczepa/naczepa</option>							
						<option value="pojazd rolniczy">pojazd rolniczy</option>							
						<option value="maszyna">maszyna</option>					
				  </select>
			</fieldset>
	
			<fieldset>
				<label>Marka</label>
				  <input placeholder="Marka" type="text" name="email" tabindex="2">
			</fieldset>
	
			<fieldset>
				  <label>Model</label>
				  <input placeholder="model" type="text" name="subject" tabindex="3" >
			</fieldset>
	
			<fieldset>
				<label>Rok produkcji</label>
				<input placeholder="Rok produkcji" type="text" name="rok_produkcji" tabindex="4" >
			</fieldset>

			<fieldset id="field2">
				<label>Typ silnika</label>
				<select id="pole2" name="typ_silnika" tabindex="5" >	
					<option value="typ-silnika" >Typ silnika</option>	
					<option value="Benzyna">Benzyna</option>  	  
					<option value="Diesel">Diesel</option> 	  
					<option value="LPG">LPG</option> 	  
					<option value="cng">CNG</option>  	  
					<option value="hybryda">Hybryda</option>  	  
					<option value="elektryczny">Elektryczny</option>  	  
					<option value="etanol">Etanol</option>  	  
					<option value="wodor">Wodór</option>
				</select>
			  </fieldset>			

			<fieldset>
				<label>Pojemność silnika</label>
				<input type="text" name="poj_silnika" tabindex="6" >
			  </fieldset>
	
			<fieldset>
				<label>Moc silnika</label>
				<input type="text" name="moc_silnika" tabindex="7">
			  </fieldset>
	
			<fieldset>
				<label>Przebieg</label>
				<input type="text" name="przebieg" tabindex="8" >
			  </fieldset>
	
			 <fieldset>
				<label>Skrzynia biegów</label>
				<select id="choseone1" name="skrzynia_biegow" tabindex="9" >	
						<option value="skrzynia-biegow" selected="selected">Skrzynia biegów</option>	
						<option value="manualna">Manualna</option>  	  
						<option value="automatyczna">Automatyczna</option> 					  
				</select>
			  </fieldset>
	
			  <fieldset>
				<label>Napęd</label>  
				<select id="choseone2" name="naped" tabindex="10" >	
						<option value="przedni" selected="selected">Przedni</option>	
						<option value="tyl">Tył</option>  	  
						<option value="4x4">4x4</option> 			  
				</select>
			  </fieldset>
	
			  <fieldset>
				<label>Drugi komplet kół: </label>   
				<select  id="choseone3" name="drugi_komplet_kol" tabindex="11">						
						<option value="tak" selected="selected">Tak</option>	
						<option value="nie">Nie</option>					 	  
				</select>
			  </fieldset>	
	
			  <fieldset>
				<label>Lokalizacja pojazdu (miasto)</label> 
				<input type="text" name="lokalizacja" tabindex="12" >
			  </fieldset>	
	
			  <fieldset>
				<label>Przegląd ważny do:</label> 
				<input type="text" name="przeglad" tabindex="13">
			  </fieldset>	
	
			  <fieldset>
				<label>Łączna liczba włascicieli:</label>   
				<input type="text" name="liczba_wlascicieli" tabindex="14" >
			  </fieldset>
	
			  <fieldset>
				<label>Uwagi dotyczące stanu technicznego</label>   
				<textarea name="message" tabindex="15" ></textarea>
			  </fieldset>
	
	
			  <fieldset>
				<span>Wyposażenie (CTRL+lewy przycisk myszy zaznacza kolejne opcje) *</span>
				<select id="fileupload" action="#" class="option-select-custom" name="wyposazenie[]" tabindex="16" multiple="multiple">					
	
					<option value="ABS">ABS</option>
					<option value="CD">CD</option>
					<option value="Centralny zamek">Centralny zamek</option>
					<option value="Elektryczne szyby przednie">Elektryczne szyby przednie</option>
					<option value="Elektrycznie ustawiane lusterka">Elektrycznie ustawiane lusterka</option>
					<option value="Immobilizer">Immobilizer</option>
					<option value="Poduszka powietrzna kierowcy">Poduszka powietrzna kierowcy</option>
					<option value="Poduszka powietrzna pasaera">Poduszka powietrzna pasażera</option>
					<option value="Radio fabryczne">Radio fabryczne</option>
					<option value="Wspomaganie kierownicy">Wspomaganie kierownicy</option>
					<option value="Alarm">Alarm</option>
					<option value="Alufelgi">Alufelgi</option>
					<option value="ASR kontrola trakcji">ASR (kontrola trakcji)</option>
					<option value="Asystent parkowania">Asystent parkowania</option>
					<option value="Asystent pasa ruchu">Asystent pasa ruchu</option>
					<option value="Bluetooth">Bluetooth</option>
					<option value="Czujnik deszczu">Czujnik deszczu</option>
					<option value="Czujnik martwego pola">Czujnik martwego pola</option>
					<option value="Czujnik zmierzchu">Czujnik zmierzchu</option>
					<option value="Czujnki parkowania przednie">Czujnki parkowania przednie</option>
					<option value="Czujniki parkowania tylne">Czujniki parkowania tylne</option>
					<option value="Dach panoramiczny">Dach panoramiczny</option>
					<option value="Elektrochromatyczne lusterka boczne">Elektrochromatyczne lusterka boczne</option>
					<option value="Elektrochromatyczne lusterko wsteczne">Elektrochromatyczne lusterko wsteczne</option>
					<option value="Elektryczne szyby tylne">Elektryczne szyby tylne</option>
					<option value="Elektrycznie ustawiane fotele">Elektrycznie ustawiane fotele</option>
					<option value="ESP stabilizacja toru jazdy">ESP (stabilizacja toru jazdy)</option>
					<option value="Gniazdo AUX">Gniazdo AUX</option>
					<option value="Gniazdo SD">Gniazdo SD</option>
					<option value="Gniazdo USB">Gniazdo USB</option>
					<option value="Hak">Hak</option>
					<option value="HUD wywietlacz przezierny">HUD (wyświetlacz przezierny)</option>
					<option value="Isofix">Isofix</option>
					<option value="Kamera cofania">Kamera cofania</option>
					<option value="Klimatyzacja automatyczna">Klimatyzacja automatyczna</option>
					<option value="Klimatyzacja czterostrefowa">Klimatyzacja czterostrefowa</option>
					<option value="Klimatyzacja dwustrefowa">Klimatyzacja dwustrefowa</option>
					<option value="Klimatyzacja manualna">Klimatyzacja manualna</option>
					<option value="Komputer pokadowy">Komputer pokładowy</option>
					<option value="Kurtyny powietrzne">Kurtyny powietrzne</option>
					<option value="opatki zmiany biegw">Łopatki zmiany biegów</option>
					<option value="MP3">MP3</option>
					<option value="Nawigacja GPS">Nawigacja GPS</option>
					<option value="Odtwarzacz DVD">Odtwarzacz DVD</option>
					<option value="Ogranicznik prdkoci">Ogranicznik prędkości</option>
					<option value="Ogrzewanie postojowe">Ogrzewanie postojowe</option>
					<option value="Podgrzewana przednia szyba">Podgrzewana przednia szyba</option>
					<option value="Podgrzewane lusterka boczne">Podgrzewane lusterka boczne</option>
					<option value="Podgrzewane przednie siedzenia">Podgrzewane przednie siedzenia</option>
					<option value="Podgrzewane tylne siedzenia">Podgrzewane tylne siedzenia</option>
					<option value="Poduszka powietrzna chronica kolana">Poduszka powietrzna chroniąca kolana</option>
					<option value="Poduszki boczne przednie">Poduszki boczne przednie</option>
					<option value="Poduszki boczne tylne">Poduszki boczne tylne</option>
					<option value="Przyciemniane szyby">Przyciemniane szyby</option>
					<option value="Radio niefabryczne">Radio niefabryczne</option>
					<option value="Regulowane zawieszenie">Regulowane zawieszenie</option>
					<option value="Relingi dachowe">Relingi dachowe</option>
					<option value="Relingi dachowe">Relingi dachowe</option>
					<option value="Szyberdach">Szyberdach</option>
					<option value="wiata do jazdy dziennej">Światła do jazdy dziennej</option>
					<option value="wiata LED">Światła LED</option>
					<option value="wiata przeciwmgielne">Światła przeciwmgielne</option>
					<option value="wiata Xenonowe">Światła Xenonowe</option>
					<option value="Tapicerka skrzana">Tapicerka skórzana</option>
					<option value="Tapicerka welurowa">Tapicerka welurowa</option>
					<option value="Tempomat">Tempomat</option>
					<option value="Tempomat aktywny">Tempomat aktywny</option>
					<option value="Tuner TV">Tuner TV</option>
					<option value="Wielfunkcyjna kierownica">Wielfunkcyjna kierownica</option>
					<option value="Zmieniarka CD">Zmieniarka CD</option>		
				</select>
			  </fieldset>
	
				<fieldset>
				<span>Dodaj zdjęcia (max 20 sztuk na jeden raz) *</span>
			            <div class="files" id="files1">			                
			                  <input type="file" name="upload[]"  multiple="multiple" enctype="multipart/form-data" />			               
			                <br />
			                <ul class="fileList"></ul>
			            </div>

			            <div class="row">
			                <div class="span16">

			                    <table class="zebra-striped"><tbody class="files"></tbody></table>
			                </div>
			            </div>
					<a href="https://fck-auto.de/ankaufahrzeuge/foto/">Zobacz jak powinny wyglądać zdjęcia do wyceny</a>


            <div class="row">
                <button type="x" id="uploadBtn" class="btn primary start">Start upload</button>
            </div>


				</fieldset>


				<fieldset>
				<label>Nr telefornu</label>	
				<input type="text" name="tel" tabindex="17" >
				</fieldset>


				<fieldset>
				<label>E-mail</label>		
				<input type="text" name="adres_emai" tabindex="18" >
				</fieldset>

				<fieldset>
				<label>Uwagi</label>	
				<textarea name="message_uwagi" tabindex="19" ></textarea>
				</fieldset>
	
			<fieldset>
				  <button name="submit" type="submit" id="contact-submit" data-submit="...Wysyłanie">Wyślij</button>
			</fieldset>
		
		</form> 
	</div>

JavaScript:

$.fn.fileUploader = function (filesToUpload, sectionIdentifier) {
    var fileIdCounter = 0;

    this.closest(".files").change(function (evt) {
        var output = [];

        for (var i = 0; i < evt.target.files.length; i++) {
            fileIdCounter++;
            var file = evt.target.files[i];
            var fileId = sectionIdentifier + fileIdCounter;

            filesToUpload.push({
                id: fileId,
                file: file
            });

            var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + fileId + "\">Remove</a>";

            output.push("<li><strong>", escape(file.name), "</strong> - ", file.size, " bytes. &nbsp; &nbsp; ", removeLink, "</li> ");
        };

        $(this).children(".fileList")
            .append(output.join(""));

        //reset the input to null - nice little chrome bug!
        evt.target.value = null;
    });

    $(this).on("click", ".removeFile", function (e) {
        e.preventDefault();

        var fileId = $(this).parent().children("a").data("fileid");

        // loop through the files array and check if the name of that file matches FileName
        // and get the index of the match
        for (var i = 0; i < filesToUpload.length; ++i) {
            if (filesToUpload[i].id === fileId)
                filesToUpload.splice(i, 1);
        }

        $(this).parent().remove();
    });

    this.clear = function () {
        for (var i = 0; i < filesToUpload.length; ++i) {
            if (filesToUpload[i].id.indexOf(sectionIdentifier) >= 0)
                filesToUpload.splice(i, 1);
        }

        $(this).children(".fileList").empty();
    }

    return this;
};

(function () {
    var filesToUpload = [];

    var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");


    $("#uploadBtn").click(function (e) {
        e.preventDefault();

        var formData = new FormData();

        for (var i = 0, len = filesToUpload.length; i < len; i++) {
            formData.append("files", filesToUpload[i].file);
        }

        $.ajax({
            data: formData,
            processData: false,
            contentType: false,
            type: "POST",
            success: function (data) {
              

            },
            error: function (data) {
                alert("ERROR - " + data.responseText);
            }
        });
    });
})()

ORAZ PHP:



<?php session_start();
if(isset($_POST['submit'])) {
	$youremail = 'm.szkubiel@e-intermedia.pl';
	$fromsubject = 'Temat wiadomości';
	$name = $_POST['rodzaj_pojazdu'];
	$mail = $_POST['email'];
	$subject = $_POST['subject']; 
	$message = $_POST['rok_produkcji']; 
	$poj_silnika = $_POST['poj_silnika']; 
	$moc_silnika = $_POST['moc_silnika']; 
	$przebieg = $_POST['przebieg'];
	$lokalizacja = $_POST['lokalizacja'];
	$przeglad = $_POST['przeglad'];
	$liczba_wlascicieli = $_POST['liczba_wlascicieli'];
	$message = $_POST['message'];
	$tel = $_POST['tel'];
	$adres_emai = $_POST['adres_emai'];
	$message_uwagi = $_POST['message_uwagi'];
	
	$skrzynia_biegow = $_POST['skrzynia_biegow'];
	$naped = $_POST['naped'];
	$drugi_komplet_kol = $_POST['drugi_komplet_kol'];

	$wyposazenie = implode(', ', $_POST['wyposazenie']);
	$typ_silnika = $_POST['typ_silnika'];

	
	if(count($_FILES['upload']['name']) > 0){

		$rand = rand();

		$createFolder = uniqid();
		mkdir('uploads/'.$createFolder);

        for($i=0; $i<count($_FILES['upload']['name']); $i++) {

            $tmpFilePath = $_FILES['upload']['tmp_name'][$i];

            if($tmpFilePath != ""){
            
                $shortname = $_FILES['upload']['name'][$i];
                $explode = explode(".", $_FILES['upload']['name'][$i]);
                $filePath = "uploads/".$createFolder. '/' . rand().'.'.$explode[1];

                if(move_uploaded_file($tmpFilePath, $filePath)) {
                    $files[] = $shortname;

                   
                }
            }
        }

       
    }

	$to = $youremail; 
	$headers .= "Reply-To: Some One <".$_POST['name'].">\r\n"; 
	$headers .= "Return-Path: Some One <".$_POST['name'].">\r\n"; 
	$headers .= "From: Some One <".$_POST['name'].">\r\n"; 
	$headers .= "Organization: FCK AUTO\r\n"; 
	$headers .= "Content-Type: text/html\r\n"; 
  
	$mailsubject = $fromsubject;
  
	$body .= $fromsubject.'
		
<table>
		<tr> <td> Rodzaj pojazdu: </td>  <td> '.$name.' </td> </tr>
		 <br>
		 <hr>
		 <tr> <td> Marka: </td>  <td>'.$mail.' 
		 <br>
		 <hr>
		 <tr> <td> Model: </td>  <td>'.$subject.' 
		 <br>
		 <hr>
		 <tr> <td> Rok produkcji: </td>  <td>'.$message.' 
		 <br>
		 <hr>
		 <tr> <td> Typ silnika: </td>  <td>'.$typ_silnika.' 
		 <br>
		 <hr>
		 <tr> <td> Pojemność silnika: </td>  <td>'.$poj_silnika.'
		 <br>
		 <hr>  
		 <tr> <td> Moc silnika:</td>  <td> '.$moc_silnika.'
		 <br>
		 <hr>
		 <tr> <td> Przebieg:</td>  <td> '.$przebieg.'
		 <br>
		 <hr>
		 <tr> <td> Skrzynia biegów: </td>  <td>'.$skrzynia_biegow.' 
		 <br>
		 <hr>
		 <tr> <td> Napęd: </td>  <td>'.$naped.' 
		 <br>
		 <hr>
		 <tr> <td> Drugi komplet kół:</td>  <td> '.$drugi_komplet_kol.' 
		 <br>
		 <hr>
		 <tr> <td> Lokalizacja: </td>  <td>'.$lokalizacja.' 
		 <br>
		 <hr>
		 <tr> <td> Przegląd: </td>  <td>'.$przeglad.'
		 <br>
		 <hr>
		 <tr> <td> Łączna liczba właścicieli: </td>  <td>'.$liczba_wlascicieli.' 
		 <br>
		 <hr>
		 <tr> <td> Uwagi dotyczące stani technicznego: </td>  <td>'.$message.' 
		 <br>
		 <hr>
		 <tr> <td> Wyposażenie: </td>  <td>'.$wyposazenie.' 
		 <br>
		 <hr>
		 <tr> <td> Telefon:</td>  <td> '.$tel.' 
		 <br>
		 <hr>
		 <tr> <td> Adres e-mail:</td>  <td> '.$adres_emai.'
		 <br>
		 <hr> 
		 <tr> <td> UWAGI:</td>  <td> '.$message_uwagi.' 
		 <br>
		 <hr>
		 <a href="https://fck-auto.de/form/galeria.php?upload=/'.$createFolder.'">LINK DO GALERII</a>
<table>		
	'; 

	echo "<div> Dziękujemy za przesłanie wiadomości, odezwiemy się w najbliższym czasie</div>
		<div>Za chwilę nastąpi powrót do strony...</div>
	"; 
									mail($to, $subject, $body,$headers);
	 } else { 
	echo "You must write a message. </br> Please go to <a href='/index.html'>Home Page</a>"; 
}
?>
3

Może powiedz coś więcej. Ciężko się przebić przez tą ścianę opcji. Może spróbuj zminimalizować kod do tego jaki uważasz za problematyczny.

0

Ta funkcja robi upload plików. Chcę te pliki przenieść do formularza, który metodą POST poda wgrane zdjęcia do następnego pliku i wyśle wiadomość.

(function () {
    var filesToUpload = [];

    var files1Uploader = $("#files1").fileUploader(filesToUpload, "files1");

    $("#uploadBtn").click(function (e) {
        e.preventDefault();

        var formData = new FormData();

        for (var i = 0, len = filesToUpload.length; i < len; i++) {
            formData.append("files", filesToUpload[i].file);
        }

        $.ajax({
            data: formData,
            processData: false,
            contentType: false,
            type: "POST",
            success: function (data) {

CHCĘ TĄ WYGENEROWANĄ WARTOŚĆ PRZEKAZAĆ METODĄ POST DO KOLEJNEGO PLIKU


            },
            error: function (data) {
                alert("ERROR - " + data.responseText);
            }
        });
    });
})()

Taki skrypt znalazłem tutaj: https://jsfiddle.net/alexjamesbrown/2nzL9f7g/

1
Mateusz Szkubiel napisał(a):

Formularz musi pokazywać wybrane zdjęcia, mieć możliwość usunięcia i dogrania.

Tego się nie da zrobić bez fizycznego załadowania grafiki na serwer.
Jedyne informacje, które można odczytać z pół <input type="upload"> to:
nazwa, rozmiar i typ pliku
https://developer.mozilla.org/en-US/docs/Web/API/File/Using_files_from_web_applications

0

Ok, niech tylko pokazuje nazwy. O to chodzi żeby dopiero przy samym wysyłaniu ładował pliki. Tak jak zwykły formularz z polem input. Ładowanie na serwer odbywa się po przekazaniu wartości metodą POST - i na tym mi zależy, nie wiem jak to zrobić z użyciem tego skryptu https://jsfiddle.net/alexjamesbrown/2nzL9f7g/ .

W tym miejscu wgrywają się pliki:

    if(count($_FILES['upload']['name']) > 0){

        $rand = rand();

        $createFolder = uniqid();
        mkdir('uploads/'.$createFolder);

        for($i=0; $i<count($_FILES['upload']['name']); $i++) {

            $tmpFilePath = $_FILES['upload']['tmp_name'][$i];

            if($tmpFilePath != ""){

                $shortname = $_FILES['upload']['name'][$i];
                $explode = explode(".", $_FILES['upload']['name'][$i]);
                $filePath = "uploads/".$createFolder. '/' . rand().'.'.$explode[1];

                if(move_uploaded_file($tmpFilePath, $filePath)) {
                    $files[] = $shortname;

                }
            }
        }

    }
0

Witam,
Na studiach, jakis czas temu, mialem podobny problem no i jeszcze brakiwalo mi czasu zeby cos zrobic. To moze jak pan nie potrafi przekazac zdjec z skryptu js - php, niech pan sie skontaktuje z jakas firma, i programisci pomoga, jak pomogli mi. Pozdrawiam

1 użytkowników online, w tym zalogowanych: 0, gości: 1