Skocz do zawartości


[jQuery ui]wysyłanie zdjecia


Brak odpowiedzi do tego tematu

#1 Stef@n

    Początkujący

  • Użytkownik
  • Pip
  • 29 postów

Napisano 12 April 2010 - 08:38 AM

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=&#34;Content-Type&#34; content=&#34;text/html; charset=UTF-8&#34; />
<title>TEST</title>
<link type=&#34;text/css&#34; href=&#34;css/start/jquery-ui-1.8.custom.css&#34; rel=&#34;stylesheet&#34; />	
<link type=&#34;text/css&#34; href=&#34;css/styl.css&#34; rel=&#34;stylesheet&#34; />
<script type=&#34;text/javascript&#34; src=&#34;js/jquery-1.4.2.min.js&#34;></script>
<script type=&#34;text/javascript&#34; src=&#34;js/jquery-ui-1.8.custom.min.js&#34;></script>
<script type=&#34;text/javascript&#34;>
$&#40;function&#40;&#41; {
	$&#40;&#34;#dialog&#34;&#41;.dialog&#40;&#34;destroy&#34;&#41;;

	var wpis = $&#40;&#34;#wpis&#34;&#41;, 
		zdjecie = $&#40;&#34;#zdjecie&#34;&#41;, 
		allFields = $&#40;&#91;&#93;&#41;.add&#40;wpis&#41;.add&#40;zdjecie&#41;,
		tips = $&#40;&#34;.validateTips&#34;&#41;;

	function updateTips&#40;t&#41; {
		tips
			.text&#40;t&#41;
			.addClass&#40;&#39;ui-state-highlight&#39;&#41;;
		setTimeout&#40;function&#40;&#41; {
			tips.removeClass&#40;&#39;ui-state-highlight&#39;, 1500&#41;;
		}, 500&#41;;
	}

	function checkLength&#40;o,n,min,max&#41; {
		if &#40; o.val&#40;&#41;.length > max || o.val&#40;&#41;.length < min &#41; {
			o.addClass&#40;&#39;ui-state-error&#39;&#41;;
			updateTips&#40;&#34;&#34; + n + &#34;&#58; musi mieć od &#34;+min+&#34; do &#34;+max+&#34; znaków.&#34;&#41;;
			return false;
		} else {
			return true;
		}
	}

	function checkRegexp&#40;o,regexp,n&#41; {
		if &#40; !&#40; regexp.test&#40; o.val&#40;&#41; &#41; &#41; &#41; {
			o.addClass&#40;&#39;ui-state-error&#39;&#41;;
			updateTips&#40;n&#41;;
			return false;
		} else {
			return true;
		}
	}
	
	$&#40;&#34;#formularz&#34;&#41;.dialog&#40;{
		autoOpen&#58; false,
		height&#58; 450,
		width&#58; 450,
		modal&#58; true,
		buttons&#58; {
			&#39;Dodaj wpis...&#39;&#58; function&#40;&#41; {
				var bValid = true;
				allFields.removeClass&#40;&#39;ui-state-error&#39;&#41;;

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

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

$zapytanie = mysql_query&#40;&#34;SELECT * FROM test2&#34;&#41;;
	while &#40;$rekord = mysql_fetch_array &#40;$zapytanie&#41;&#41; { 
?>
			<tr>
				<td><?php echo $rekord&#91;&#39;wpis&#39;&#93; ?></td>
				<td><a target=&#34;_blank&#34; href=&#34;<?php echo $rekord&#91;&#39;zdjecie&#39;&#93; ?>&#34;>Zobacz</a></td>
			</tr>
<?php } ?>
		</tbody>
	</table>
</div>
</div>
</body>
</html>

kod plik.php
<?php
//POŁĄCZENIE Z BAZA

if&#40;$_POST&#91;&#39;wpis&#39;&#93;&#41; {
	$filename = $_FILES&#91;&#34;zdjecie&#34;&#93;&#91;&#34;name&#34;&#93;;
	move_uploaded_file&#40;$_FILES&#91;&#39;zdjecie&#39;&#93;&#91;&#39;tmp_name&#39;&#93;,&#34;$filename&#34;&#41;;
	mysql_query&#40;&#34;INSERT INTO test2 &#40;id, wpis, zdjecie&#41; VALUES &#40;&#39;&#39;, &#39;{$_POST&#91;&#39;wpis&#39;&#93;}&#39;, &#39;$filename&#39;&#41;;&#34;&#41;;
}
?>

Pozdrawiam i bardzo proszę o rade...




Dodaj odpowiedź



  


Użytkownicy przeglądający ten temat: 1

0 użytkowników, 1 gości, 0 anonimowych