5
У меня есть страница профиля обновления. Он имеет три формы, он использует запрос получения, чтобы показать любую форму. Как update_profile.php?type=profile позволяет пользователю отредактировать его профиль, update_profile.php?type=settings позволяет пользователю изменить настройки своей учетной записи.Загрузка файлов с использованием jquery без обновления страницы
Тип: профиль имеет входной файл, я хочу, чтобы пользователи могли загружать без обновления страницы. Теперь это невозможно сделать с помощью ajax, поэтому мне понадобится обходной путь. Я пробовал метод iframe, метод xhr2 и метод html5 + ajax, который кто-то разместил в stackoverflow.
Так что если кто-то будет любезным объяснить мне вещи в подробных шагах, я был бы признателен. Вот мой HTML:
<script type='text/javascript'>
function nouser() {
$().toastmessage('showToast', {
text : 'The user does not exist',
sticky : true,
position : 'middle-center',
type : 'error',
closeText: '',
close : function() {
console.log("toast is closed ...");
}
});
}
</script>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Update Profile</title>
<link rel="shortcut icon" type="image/png" href="includes/template/images/favicon.png" />
<link rel="stylesheet" type="text/css" href="includes/template/css2/style.css" />
<link rel="stylesheet" type="text/css" href="includes/jquery/toast/resources/css/jquery.toastmessage.css" />
<link rel="stylesheet" type="text/css" href="includes/jquery/notification/css/jquery_notification.css" />
<script type="text/javascript" src="includes/jquery/jquery_v_1.4.js"></script>
<script type="text/javascript" src="includes/jquery/toast/javascript/jquery.toastmessage.js"></script>
<script type="text/javascript" src="includes/jquery/notification/js/jquery_notification_v.1.js"></script>
<script type="text/javascript" src="includes/jquery/auto_resize/resize.js"></script>
<script type="text/javascript" src="includes/jquery/jquery_form.js"></script>
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css2/ie.css" />
<![endif]-->
</head>
<body>
<div class="topBar" >
<marquee>Welcome to The Marshall Meme. Your IP Adress is 127.0.0.1 You are logged in as marshall</marquee>
</div>
<br />
<div class="logo" >
<a href="http://www.themarshallmeme.com"><img src="includes/template/images/logo.png"/></a><br/>
</div>
<center>
<div id="wrap">
<br>
<div class="wrapbg">
<span class="corners-top"><span></span></span>
<a class='nav' href='index.php'>Home</a>
<a class='nav' href='whoson.php'>Whos online</a>
<a class='nav' href='logout.php'>Logout</a> <a class='nav' href='forum.php'>Forum</a>
<span class="corners-bottom"><span></span></span>
</div><div class="wrapbg">
<span class="corners-top"><span></span></span>
<div id="content">
Web name
<hr class="hr1" />
<br />
<ul>
<a href='whats_new.php'><button class='action greenbtn'><span class='label'>Whats new?</span></button></a><a href='friend_requests.php'><button class='action redbtn'><span class='label'>Friend requests</span></button></a><a href='update_profile.php?type=profile'><button class='action greenbtn'><span class='label'>Edit profile</span></button></a><a href='update_profile.php?type=settings'><button class='action bluebtn'><span class='label'>Security Settings</span></button></a><a href='update_profile.php?type=changepass'><button class='action greenbtn'><span class='label'>Change password</span></button></a></div>
<span class="corners-bottom"><span></span></span>
</div><div id='emptydiv'> </div>
<div class="wrapbg">
<span class="corners-top"><span></span></span>
<div id="content"><br/>
Update profile
<hr class='hr1'>
<form action='' method="POST" enctype="multipart/form-data">
<table>
Profile picture<br>
<img src="uploads/profile_pics/TIFF_06_liam-neeson_01.jpg"></img>
Thumbnail
<img src="uploads/profile_pics_small/TIFF_06_liam-neeson_01.jpg" ?></img>
<tr><td class="lTxt">Change profile picture:</td> <td><input type="file" name="pic"/></td></tr>
<tr><td class="lTxt">About me:</td> <td><textarea name='about'>Updating my profile :|
fuck yeaaaa</textarea></td></tr>
<tr><td class="lTxt">Interests:</td> <td><textarea name='interests'>I love web development with jquery and php.
Really awesome! yea</textarea></td></tr>
<input type='hidden' name='action' value='profile'/>
<tr><td></td><td><button id="update_profile" name='update' class="action greenbtn"><span class="label">Update profile</span></button></td></tr>
</table>
</form>
</a></div>
<span class="corners-bottom"><span></span></span>
</div> <script type='text/javascript'>
$(function(){
$('form[name=update_stuff]').on("submit", function(e){
e.preventDefault();
$.ajax({
url: 'process.php',
type: 'POST',
data: $(this).serialize(),
success: function(data){
$('#emptydiv').html(data);
}
});
});
});
</script>
</div>
</br>
<div id="footer">
Copyright © 2010-2011, <a href="http://www.themarshallmeme.com">Marshall Meme</a>. All rights reserved.<br>
There are no users online</div>
</div>
</center>
</body>
</html>
Вот код JQuery Я обычно использую для отправки форм:
$(function(){
$('form[name=update_stuff]').on("submit", function(e){
e.preventDefault();
$.ajax({
url: 'process.php',
type: 'POST',
data: $(this).serialize(),
success: function(data){
$('#emptydiv').html(data);
}
});
});
});
Я использую $ _FILES в PHP, чтобы получить имя файла и проверьте его расширение и размер сервер, поэтому мне нужна информация в этом. Как это может быть сделано? Также мне нужно будет изменить имя формы для обновления профиля и написать для него другой код, чем другие формы на той же странице?
фон закачивающие использовать флэш-апплет или скрытый IFRAME чтобы скрыть загрузку с переднего плана страницы. Вы не можете использовать ajax для самостоятельной загрузки, так как ajax не поддерживает файлы, а только стандартные данные/строки. –
Thats, почему я спросил, как я могу это сделать, используя iframes, мне просто нужны подробные шаги, чтобы сделать это, потому что ive попробовал много учебников, а также irc (они предлагают мне использовать плагины) Мое последнее средство - stackoverflow T_T –