[jQuery UI] Wysyłanei zdjecia

0

Witam, mam problem dotyczący wysyłania plików na serwer dokładnie zdjęcia.
Używam do tego jQuery UI. Próbuje robić to poprzez metodę POST, która przekazuje do osobnego pliku PHP dane i dodaje je do bazy danych. Wszystko dane się dodają poza wysyłaniem pliku. Jak wykonać tego typu przekazywanie danych z jQuery do PHP aby upload był wykonywany już w pliku PHP? Testować można na http://jokersite.website.pl/test/

Pokazuje kod index.php

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<link type="text/css" href="css/start/jquery-ui-1.8.custom.css" rel="stylesheet" />	
<link type="text/css" href="css/styl.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
$(function() {
	$("#dialog").dialog("destroy");

	var wpis = $("#wpis"), 
		zdjecie = $("#zdjecie"), 
		allFields = $([]).add(wpis).add(zdjecie),
		tips = $(".validateTips");

	function updateTips(t) {
		tips
			.text(t)
			.addClass('ui-state-highlight');
		setTimeout(function() {
			tips.removeClass('ui-state-highlight', 1500);
		}, 500);
	}

	function checkLength(o,n,min,max) {
		if ( o.val().length > max || o.val().length < min ) {
			o.addClass('ui-state-error');
			updateTips("" + n + ": musi mieć od "+min+" do "+max+" znaków.");
			return false;
		} else {
			return true;
		}
	}

	function checkRegexp(o,regexp,n) {
		if ( !( regexp.test( o.val() ) ) ) {
			o.addClass('ui-state-error');
			updateTips(n);
			return false;
		} else {
			return true;
		}
	}
	
	$("#formularz").dialog({
		autoOpen: false,
		height: 450,
		width: 450,
		modal: true,
		buttons: {
			'Dodaj wpis...': function() {
				var bValid = true;
				allFields.removeClass('ui-state-error');

				bValid = bValid && checkLength(wpis,"Wpis",3,40); //sprawdzanie znaków łańcucha
				
				if (bValid) {
					$.post("plik.php", { 
						wpis: wpis.val(), 
						zdjecie: zdjecie.val()
					}); 
					$('#users').load('index.php #users');
					$(this).dialog('close');						
				}
			},
			Wyjdź: function() {
				$(this).dialog('close');
			}
		},
		close: function() {
			allFields.val('').removeClass('ui-state-error');
		}
	});
	
	$('#dodaj_wpis')
		.button()
		.click(function() {
			$('#formularz').dialog('open');
		});

});
</script>
</head>
<body>
<div id="formularz" title="Formularz">
	<p class="validateTips">Prosimy o uzupełnienie formularza.</p>
	<form enctype="multipart/form-data">
	<label for="wpis"><b>Wpis:</b></label>
	<input type="text" name="wpis" id="wpis" class="text ui-widget-content ui-corner-all" />
	<label for="zdjecie"><b>Zdjęcie</b> (tylko format *.jpg):</label>
	<input type="file" name="zdjecie" id="zdjecie" size="60" />
	</form>	
</div>
<button id="dodaj_wpis">Dodaj wpis...</button>
<div id="users-contain" class="ui-widget">
<div id="users">
	<table class="ui-widget ui-widget-content">
		<thead>
			<tr class="ui-widget-header ">
				<th>Wpis</th>
				<th>Zdjecie</th>
			</tr>
		</thead>
		<tbody>
<?php 
//POŁĄCZENIE Z BAZA

$zapytanie = mysql_query("SELECT * FROM test2");
	while ($rekord = mysql_fetch_array ($zapytanie)) { 
?>
			<tr>
				<td><?php echo $rekord['wpis'] ?></td>
				<td><a target="_blank" href="<?php echo $rekord['zdjecie'] ?>">Zobacz</a></td>
			</tr>
<?php } ?>
		</tbody>
	</table>
</div>
</div>
</body>
</html>

kod plik.php

<?php
//POŁĄCZENIE Z BAZA

if($_POST['wpis']) {
	$filename = $_FILES["zdjecie"]["name"];
	move_uploaded_file($_FILES['zdjecie']['tmp_name'],"$filename");
	mysql_query("INSERT INTO test2 (id, wpis, zdjecie) VALUES ('', '{$_POST['wpis']}', '$filename');");
}
?>

Pozdrawiam i bardzo proszę o rade...

0

Pliku nie wyślesz w ten sposób, bo z poziomu JS byś musiał mieć dostęp do systemu plików. Nie można odczytać zawartości pliku wskazanego w inpucie.

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