Uploading File tanpa Submit Form (like Gmail Attach file)

 Lagi mengerjakan sebuah project untuk sebuah rental buku di Bandung, dalam form pendaftarannya diminta untuk mengupload foto nya.... nah saya mentok gimana cara menampilkan foto itu tanpa mensubmit form pendaftarannya dulu.... sudah tanya kesana kemari dan akhirnya ketemu di web nya mr Sajith M.R. berikut saya copy pastekan isinya.... beserta link nya, jika ada yang ingin melihat langsung.

Now we can see ajax everywhere. Most of the famous websites are now enabled ajax for providing faster navigation and browsing speed.
If you are a gmail user, the thing you noticed very attractively should be the file attaching part of the email composing window.
If you wait for sometime you can see, your file gets automatically uploaded without submitting the whole form. This is not Ajax. Because XMLHttpRequest (XHR) is not supporting multipart/form-data.
You can use iframe for this purpose by pointing the target of form submission towards the iframe (you can place it as hidden style=”display:none”)

You can write javascript at the upload.php end, you can change the file uploaded updations just like ajax

ini kode pemrogramannya:

index.php

<?php /**

Program by: Sajith.M.R
contact me: admin@sajithmr.com
*/ ?>
<p>File Uploading Like Gmail. You can upload multiple files without submitting the whole page. You can upload file like ajax. This is using iframe for file upload</p>


<form  target="hiddenframe" enctype="multipart/form-data" action="upload.php" method="POST" name="uploadform">
<p>
  <label>To:
  <input name="textfield2" type="text" id="textfield2" size="60" maxlength="60" />
  <br />
  <br />
  Subject: 
  <input name="textfield" type="text" id="textfield" size="60" maxlength="60" />
  <br />
  <br />
  Attach File:
  <input type="file" name="filefieldname" id="fileField"   onchange="document.uploadform.submit()"/>
  </label>
</p>
<p id="uploadedfile" >
  <label></label>
</p>
<p>
  <label>
  <input type="submit" name="button" id="button" value="Submit" />
  </label>
</p>
<iframe name="hiddenframe" style="display:none" >Loading...</iframe>
</form>
<p>&nbsp; </p>

upload.php

<?php /**
Program by: Sajith.M.R
contact me: admin@sajithmr.com
*/ ?>


<?php
$target_path = "upload/";
$target_path = $target_path . basename( $_FILES['filefieldname']['name']);

if(move_uploaded_file($_FILES['filefieldname']['tmp_name'], $target_path)) {
    echo "The file ".  basename( $_FILES['uploadedfile']['name']).
    " has been uploaded";
} else{
    echo "There was an error uploading the file, please try again!";
}?>
<script>
parent.document.getElementById('uploadedfile').innerHTML += '<br><a href="upload/<?php echo $_FILES['filefieldname']['name'] ?>"><?php echo $_FILES['filefieldname']['name'] ?></a>';
</script>