Konular

Ajax ile Dosya Göndermek

İngilizce bir makaledir.

Step 1 - AJAX file upload


AJAX file upload tutorial

First of all I have to say that to create a pure AJAX file upload system is not possible because of security limitations of JavaScript. All of the Ajax upload systems I know use some third party tool/package or only mimics the AJAX feeling. Even so it makes file upload process a bit nicer. In the next section I will present you a solution which imitates the AJAX process, but uses a normal upload process and iFrames.

The concept:

  • Create a simple HTML form for file upload
  • Set the target to an iFrame which is on the actual page but not visible
  • Call a JavaScript function on form submit to display the animation
  • After the PHP part finishes the upload process, then it hides the animation

Creating the HTML file:

The HTML file we will use in this article is quite simple. It just have a simple form with a file field and a submit button. However don't forget about the enctype parameter.


	
Code: 
  1. <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" >
  2. File: <input name="myfile" type="file" />
  3. <input type="submit" name="submitBtn" value="Upload" />
  4. </form>

Besides this we need to add a bit more code to it. First we need a block where we will display the progress animation. We need an other block where we inform the visitor whether the upload was success or not. Besides this we need to add a hidden iFrame to the page which is used as the form target. At least we add an onSubmit event to the form. So our HTML body looks like this:


	
Code: 
  1. <p id="f1_upload_process">Loading...<br/><img src="loader.gif" /></p>
  2. <p id="result"></p>
  3. <form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
  4. File: <input name="myfile" type="file" />
  5. <input type="submit" name="submitBtn" value="Upload" />
  6. </form>
  7.  
  8. <iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
  9. </body>

By default the progress animation block content is hidden. We need a JavaScript function which makes this block visible if the submit button was pressed. It is a very simple code, that only changes the visibility parameter.


	
Code: 
  1. function startUpload(){
  2. document.getElementById('f1_upload_process').style.visibility = 'visible';
  3. return true;
  4. }

Besides this we need an other function, what we will call at the end of the upload process. This code will be print out a result message depending on it's parameter and hides the progress block again. 


	
Code: 
  1. function stopUpload(success){
  2. var result = '';
  3. if (success == 1){
  4. document.getElementById('result').innerHTML =
  5. '<span class="msg">The file was uploaded successfully!</span><br/><br/>';
  6. }
  7. else {
  8. document.getElementById('result').innerHTML =
  9. '<span class="emsg">There was an error during file upload!</span><br/><br/>';
  10. }
  11. document.getElementById('f1_upload_process').style.visibility = 'hidden';
  12. return true;
  13. }

Before we creating the PHP code we still need to create a style for the form and the progress block. The form style is very simple, but the progress block style sets the z-index, position and visibility parameter as well.


	
Code: 
  1. #f1_upload_process{
  2. z-index:100;
  3. position:absolute;
  4. visibility:hidden;
  5. text-align:center;
  6. width:400px;
  7. margin:0px;
  8. padding:0px;
  9. background-color:#fff;
  10. border:1px solid #ccc;
  11. }
  12.  
  13. form{
  14. text-align:center;
  15. width:390px;
  16. margin:0px;
  17. padding:5px;
  18. background-color:#fff;
  19. border:1px solid #ccc;
  20.  
  21. }

Now we can focus on the server side.

Server side code:

The server side code is written in PHP and it is very short and simple. First we need to set the file destination path. In this case we will use the actual working directory. Afterwards we introduce a variable that shows if there was an error or not during the upload process. Next we move the uploaded file from the tmp directory to it's defined location and set the result variable if upload was success. At the end I have inserted a sleep command to make animation a bit longer in case of very fast uploads.  

Now the end the PHP code looks like this:


	
Code: 
  1. <?php
  2. $destination_path = getcwd().DIRECTORY_SEPARATOR;
  3.  
  4. $result = 0;
  5.  
  6. $target_path = $destination_path . basename( $_FILES['myfile']['name']);
  7.  
  8. if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
  9. $result = 1;
  10. }
  11.  
  12. sleep(1);
  13. ?>
  14.  

Finish the work from iFrame:

The output of the PHP code will be displayed / executed inside the iFrame. As you remember the iFrame is not visible, however we can call a JavaScript function here. And exactly this is the point where we can call the JavaScript function defined in the HTML code to hide the progress animation and display the file upload result on the main page. We can do it with the following JavaScript code:


	
Code: 
  1. <script language="javascript" type="text/javascript">
  2. window.top.window.stopUpload(<?php echo $result; ?>);
  3. </script>
  4.  

That's it. You can find a complete AJAX file upload system in the Products section.

 

Kaynak http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html

Yorumunuzu Ekleyin
Ajax ile Dosya Göndermek Yorumları +1 Yorum
  • ali
    1
    ali
    good
    27 Haziran 2010 01:26:29, Pazar

Ajax Nedir?

Geride bıraktığımız 2005-2006 yıllarında hakkında en çok konuşulan web olaylarından birisi ajax oldu. Dünya çapında ün sahibi olmuş sitelerin kendi servislerinde ajax isimli tekniği etkin bir şekilde kullanması sonucu pek çok kişinin dikkati ajax üzerine yoğunlaştı. Fakat kişilerin yaptığı ilk yanlış, ajax tekniğini başlı başına yeni bir programlama dili olarak görmeleriydi. Ajax tekniği, daha önceden zaten var olan javascript ve xml dillerinin, web tarayıcısında hazır bulunan xmlhttprequest nesnesi etrafında birlikte kullanılmasından ibarettir.

33,773 Okunma 1 Yorum 05/05/2007 01:39:51

Ajax Nedir?

Bu yazımda web uygulamalarında gün geçtikçe daha yoğun bir şekilde kullanılan bir teknikten bahsedeceğim.

28,311 Okunma Henüz yorum yapılmamış 04/01/2008 02:23:57

Javascript Ve Ajax İle Zamanuyumsuz İstekler Oluşturma.

Web uygulamalarının çoğu, sunucudan tüm html sayfasını alan bir istek/yanıt modelini kullanır. Sonuçta kullanıcı bir düğmeyi tıklatır, sunucuyu bekler, başka bir düğmeyi tıklatır ve biraz daha bekler. Ajax ve xmlhttprequest nesnesiyle, kullanıcıların sunucu yanıtını beklemelerine hiçbir zaman gerek bırakmayan bir istek/yanıt modeli kullanabilirsiniz. Bu makalede, brett mclaughlin, çapraz tarayıcı yöntemiyle xmlhttprequest örneklerinin nasıl oluşturulacağını, isteklerin oluşturulmasını ve gönderilmesini ve sunucuya yanıt verilmesini gösteriyor.

22,142 Okunma Henüz yorum yapılmamış 03/05/2007 01:44:17

Ajax'a Giriş

Ajax (asynchronous javascript and xml); web tabanlı uygulamalarda, zengin kullanıcı arayüzü ve güçlü arka plan uygulamaları bütünleştiren bir yaklaşım ve geliştirme ortamıdır.

21,078 Okunma Henüz yorum yapılmamış 22/06/2007 01:26:25

Ajax Nedir? Ajaxı Oluşturan Bileşenler Nelerdir?

Ajax, terimolojik olarak asynchronous javascript and xml; yani javascript ve xml'in eş zamanlı olmayan hareketlerle icra ettiği faaliyete verilen ?simdir.

19,896 Okunma Henüz yorum yapılmamış 03/05/2007 01:45:22

30 Saniyede Ajax.

Eburhanın yazmış olduğu ajax'i anlamak ve ibrahim'in ajax'in ne olduğuna değindiği ajax seminer notlarım yazılarından sonra sanırım ajax hakkında genel olarak fikir sahibi olduk. Bu yazımla kodlara ilk adımımızı atacağız ve ajax'in çekirdeği olan xmlhttprequest nesnesinin kullanımını göreceğiz.

19,046 Okunma 2 Yorum 03/05/2007 01:41:38

Ajax Nedir?

"ajax;ne Bir Dil,ne De Bir Kütüphane De?ildir. Ajax Sadece Bir Yöntemdir."

16,183 Okunma Henüz yorum yapılmamış 26/04/2007 17:43:57

Yükleniyor...