Monday 24 June 2013

Checking the uploading image size without submitting the form / Posting the upload file details without submitting the form


html:
--------

<form id="upload_form" >
      <input type="file" class="file" name="filename[]"  onchange="validateFileSize()" />
 </form>


js:
----


function validateFileSize(){
    var form_obj = document.getElementById("upload_form");  //upload_form is a form id
        try{
            var formData = new FormData(form_obj);   
            $.ajax({
                url: 'upload.php',  //server script to process data
                type: 'POST',
                success: function(data){},
                error: function(data){},
                data: formData,
                cache: false,
                contentType: false,
                processData: false
            });
        }catch(e){
        }
 }   



upload.php:
-----------------


  if (isset($_FILES["filename"]["name"])) {
    try {          
           echo "Upload: " . $_FILES["filename"]["name"] . "<br />";
            echo "Type: " . $_FILES["filename"]["type"] . "<br />";
            echo "Size: " . ($_FILES["filename"]["size"] / 1024) . " Kb<br />";
            echo "Temp file: " . $_FILES["filename"]["tmp_name"] . "<br />";
          } catch (Exception $e) {
             print_r($e);
          }    
    }








Note : FormData will not work in old browsers and IE
 For old browser, we can use iframe

http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously-with-jquery
http://stackoverflow.com/questions/9516251/upload-files-without-refresh-page   ===> using iframe
   
  

No comments: