使用jquery上傳文件而不刷新頁面

我有更新配置文件頁面。它有三種形式，它使用獲取請求來顯示任何一種形式。像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 &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獲取文件名並驗證其延伸和大小服務器端，所以我需要那些信息。如何才能做到這一點？我也需要更改表單名稱來更新配置文件，併爲它寫一個不同的代碼比在同一頁面的其他形式？

來源

2012-02-18 Marshall Mathews

後臺上傳使用閃光燈applet或隱藏的iframe隱藏頁面前臺的上傳。 YOu不能使用ajax自行上傳，因爲ajax不支持文件，只有標準格式的數據/字符串。 – 2012-02-18 03:38:08

這就是爲什麼我問我如何使用iframe做到這一點，我只是想要做的詳細步驟，因爲我試過很多教程，也irc（他們建議我使用插件）我最後的手段是stackoverflow T_T – 2012-02-18 04:08:51

您必須使用任何服務器腳本上傳文件，所以你必須阿賈克斯方法，J查詢使用Ajax，你可以嘗試也uplaodify

http://www.uploadify.com/

來源

2012-02-18 04:35:38

我想寫這是我自己，無論如何，我可以做到這一點？另外爲什麼我不使用插件是，這些插件大部分只是爲了文件上傳，我不知道如何配置它們以使用文本輸入。知道我的意思嗎？ – 2012-02-18 05:07:38

確定學習uploadify後，它使用php腳本和$ _FILES上傳這是很好的：D 但它有swf文件，這些文件是什麼？它是上傳者嗎？只是糟透了，我討厭閃光。我不想在我的網站上使用它，只要它有許多漏洞和東西。我也使用php腳本將上傳的文件移動到一個文件夾，我不希望uploadify自己做這件事。你能幫我配置它嗎？ – 2012-02-18 05:18:22

使用jquery上傳文件而不刷新頁面

回答

相關問題