title: Get Image file tag values with Ajax (jquery version) and show the result as the real-time previewer
body: <p>I believed it is possible for me to simplify me previous project Click <a href="https://stackoverflow.com/questions/18145838/get-ajax-variable-from-the-php-foreach-loops">here</a>!
  to build an upload previewer so the editor can use it to see what he puts before upload to the server. (just a simple previewer without loading or saving to the databse with php script).</p>
  
  <p>I use the same short Ajax and html form scripts and revise the jquery selector a little bit.
  Now it is fine for me to see the text input. Everytime I insert new word the text area will show exactly what I do.  However, something seemes to go astray with the image part. I try to use image selector (attr"src") to get the path and hope it could get the photo and show in the  tag I build. However I could only get the values as path root such as (C:/images/img1.png) insead the whole picture. The following are scripts with mentioned issues:</p>
  
  <pre><code>&lt;script language="JavaScript"&gt;
  $(document).ready(function() {
         $("form").keyup( function() {
            var qtyVal = $('.qty').val();
            var contentVal = $('.content').val();
            var imageVal = $('input:file').val();
        // get 
          $.ajax({
          type: 'POST',
          url:  'result1.php',
          data: { qty : qtyVal,
                  content : contentVal,
                  image : imageVal,
                   }, 
  
          success: function(data) {
             // get XML value
             $('#result').html($(data).find('total').text()); 
             $('#result1').html($(data).find('content').text()); 
  
                 //I bleieved something goes wrong with the following script!
  
             $('#test').attr("src").html($(data).find('upload').text());  
  
          } 
        });    
        return false;
     });
      });
  
  &lt;/script&gt;
  &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script&gt; 
  $(document).ready(function(){
      $("#news").hide();
    $("#flip").click(function(){
  
      $("#news").slideToggle("slow");
  
    });
  });
  &lt;/script&gt; 
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;a href="#"&gt;&lt;div id="flip"&gt;previewer&lt;/div&gt;&lt;/a&gt;
  &lt;div id="news" class="news"&gt;
  &lt;form method="post" enctype="multipart/form-data"&gt;
  &lt;table cellspacing="4" cellpadding="2"&gt;
  &lt;tr&gt;&lt;th&gt;title&lt;/th&gt;&lt;th&gt;content&lt;/th&gt;&lt;/tr&gt;
  
  &lt;tr&gt;
  &lt;td&gt;
  &lt;div id="result2" class="box" style="width:300px; height:350px;"&gt;
  //image block where I want to show the image by creating an imge tag&gt;
  &lt;img src="#" class="test" /&gt;&lt;/div&gt;&lt;/td&gt;
  &lt;td&gt;&lt;div id="result" class="box" style="height:100px;"&gt;&lt;/div&gt;
     &lt;div id="result1" class="box" style="height:250px; overflow:hidden;"&gt;&lt;/div&gt;
  &lt;/td&gt;&lt;/tr&gt;
  &lt;/div&gt;
  
    &lt;td bgcolor="#CCCCCC"&gt;&lt;input type="text" class="qty" name="qty" &gt;&lt;/td&gt;
    &lt;td bgcolor="#CCCCCC"&gt;&lt;textarea type="text" class="content" name="content" &gt;&lt;/textarea&gt;&lt;/td&gt;
    &lt;td&gt;&lt;input type="file" class="image" name="image"/&gt;&lt;/td&gt;
  
    &lt;td bgcolor="#CCCCCC"&gt;&lt;input type="submit" name="btnUpdate" value="update" /&gt;
        &lt;input type="submit" name="btnDelete" value="delete" /&gt;
        &lt;/td&gt;
  &lt;/tr&gt;&lt;br /&gt;
  
  &lt;tr&gt;&lt;td colspan="5" align="center"&gt;div&gt;&lt;/td&gt;&lt;/tr&gt;
  &lt;/form&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I also include my short php script as the XML file for above Ajax:</p>
  
  <pre><code>&lt;?php
  // XML
  
  header("Content-Type:text/html; charset=utf-8");
  
  // GET the text and image values 
  
  $qty = (isset($_POST["qty"]) ) ? $_POST["qty"] : $_GET["qty"];
  $content = (isset($_POST["content"]) ) ? $_POST["content"] : $_GET["content"];
  $image = (isset($_POST["image"]) ) ? $_POST["image"] : $_GET["image"];
  
  echo "&lt;?xml version=\"1.0\" ?&gt;";
  
  echo "&lt;caculation&gt;"; 
  
  echo "&lt;total&gt;" . "$qty" . "&lt;/total&gt;";
  
   // right now I can get the path back to the html page.
  echo "&lt;upload&gt;"."$image"."&lt;/upload&gt;";
  echo "&lt;content&gt;"."$content"."&lt;/content&gt;";
   echo "&lt;/caculation&gt;";
  
      ?&gt; 
  </code></pre>
  
  <p>I understand experts on SO had built powerful and professional Ajax previewer with multiple function. However, as an beginner and learner I am quite satisfied with my rookie and backward script. Hope someone can help with the bugs. Any possible advice or suggestion is welcome!</p>