Вопросы Теги

Загрузка файлов с помощью jquery без обновления страницы

У меня есть страница профиля обновления. Он имеет три формы, он использует запрос на получение, чтобы показать любую форму. Подобно 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);
            }
        });

    });
});

Я использую $ _FILES в php, чтобы получить имя файла и проверить его расширение и размер на стороне сервера, поэтому мне нужна информация в тот. Как это может быть сделано? Также нужно ли мне изменить имя формы для обновления профиля и написать для него код, отличный от других форм на той же странице?

5
задан DC_ 18 February 2012 в 05:21
поделиться