Question

我有一个更新个人资料页面。它有三种形式，它使用get请求来显示任何一种形式。与update_profile.php?type=profile一样，用户可以修改自己的个人资料，update_profile.php?type=settings可让用户修改自己的帐户设置。

类型：个人资料有一个文件输入，我希望用户能够在没有页面刷新的情况下上传。现在这不能使用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 &copy; 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来获取文件名并验证其扩展名和服务器端大小，所以我需要其中的信息。如何才能做到这一点？我是否还需要更改表单名称以更新配置文件并为其编写不同的代码而不是同一页面中的其他表单？

Answer 1

你必须使用任何服务器脚本来上传文件所以你必须使用Ajax方法，用Ajax查询j，你也可以尝试uplaodify

http://www.uploadify.com/

使用jquery上载文件而不刷新页面

1 个答案: