5
プロファイルが更新されました。 3つのフォームがあり、getリクエストを使用して1つのフォームを表示します。 update_profile.php?type=profileのように、ユーザーは自分のプロフィールを編集できます。update_profile.php?type=settingsは、ユーザーが自分のアカウント設定を編集できるようにします。ページを更新せずにjqueryを使用してファイルをアップロードする
タイプ：プロファイルにファイルが入力されているため、ユーザーがページを更新しなくてもアップロードできるようにしたい。 これはajaxを使って行うことができないので、回避策が必要になります。私は誰かがstackoverflowに投稿したiframeメソッド、xhr2メソッドとhtml5 + ajaxメソッドを試してみました。
誰かが私に詳細な手順で私を説明することが親切であれば、私はそれを感謝します。ここ は私の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);
}
});
});
});
私は、ファイル名を取得し、その拡張子とサイズを検証するためにPHPで$ _FILESを使用しますサーバー側では、私はその情報が必要です。これはどうすればできますか？ また、プロファイルを更新するためにフォーム名を変更し、同じページの他のフォームとは異なるコードを書き込む必要がありますか？あなたはAjaxの方法、AjaxでJクエリに持っているので、ファイルをアップロードするために、任意のサーバスクリプトを使用している必要があります
背景アップローダーはフラッシュアプレットまたは非表示のiframeを使用しuplaodifyも試すことができますページの前景からアップロードを非表示にする。 ajaxは標準形式のデータ/文字列だけをサポートしているため、ajaxを単独で使用することはできません。私は、アイフレームを使用してそれを行うことができますどのように尋ねた理由 –
厥は、私はちょうど 私の最後は、私が書きたいT_T –