+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: [jQuery UI] Wysyłanei zdjecia (/thread-jquery-ui-wysylanei-zdjecia)
[jQuery UI] Wysyłanei zdjecia - Stef@n - 12-04-2010
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
Kod:
<!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" rel="nofollow" href="<?php echo $rekord['zdjecie'] ?>">Zobacz</a></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</body>
</html>kod plik.php
Kod 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...