File upload show progress bar ajax without formdata and php

File upload show progress bar ajax without formdata and php

ajax file

 <script
  src="http://code.jquery.com/jquery-1.12.4.js"
  integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
  crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  
             
              <script type="application/javascript">
      $(document).on("change", "#myfile", function() {
 
  var ext = this.value.match(/\.([^\.]+)$/)[1];
  var array_ext = ['zip','pdf','jpg', 'png', 'gif', 'bmp', 'jpeg', 'GIF', 'JPG', 'PNG', 'doc', 'txt', 'docx', 'pdf', 'xls', 'xlsx','zip'];
  if(jQuery.inArray( ext, array_ext ) !== -1){


    var file_data = $("#myfile").prop("files")[0];   // Getting the properties of file from file field
    var form_data = new FormData();                  // Creating object of FormData class
    form_data.append("myfile", file_data)              // Appending parameter named file with properties of file_field to form_data
    //form_data.append("user_id", 123)                 // Adding extra parameters to form_data
    $.ajax({
                    url: "upload_avatar.php",
                  //  dataType: 'script',
xhr: function () {
                            var xhr = new window.XMLHttpRequest();
                            xhr.upload.addEventListener("progress", function (evt) {
                                if (evt.lengthComputable) {
                                    var percentComplete = evt.loaded / evt.total;
                                    percentComplete = parseInt(percentComplete * 100);
                                    $('.myprogress').text(percentComplete + '%');
                                    $('.myprogress').css('width', percentComplete + '%');
                                }
                            }, false);
console.log(xhr);
                            return xhr;
                        },
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: form_data,                         // Setting the data attribute of ajax with file_data
                    type: 'post',
success: function(res){
//alert(res);
  // $('.myprogress').text(0 + '%');
                            //        $('.myprogress').css('width', 0 + '%');
}
           })
  
  }else{
   alert('Not valid file');
  $("#myfile").val('');
  return false;
}
    })

  </script>
    <input id="myfile" type="file" name="myfile" />
    <input type="hidden" value="" name="image_file_path">
    <!--<button id="upload" value="Upload" >Upload</button>-->
     <div class="form-group">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%">0%</div>
                        </div>

                        <div class="msg"></div>
                    </div>
   
    upload_avatar.php

 

<?php

error_reporting(0);
if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") {

    $path = "uploads/"; //set your folder path
if(!is_dir($path)){
mkdir($path,0777,true);
}
    //set the valid file extensions
    $valid_formats = array("jpg", "png", "gif", "bmp", "jpeg", "GIF", "JPG", "PNG", "doc", "txt", "docx", "pdf", "xls", "xlsx","zip"); //add the formats you want to upload

    $name = $_FILES['myfile']['name']; //get the name of the file
   
    $size = $_FILES['myfile']['size']; //get the size of the file
//$name= uniqid()."test";
    if (strlen($name)) { //check if the file is selected or cancelled after pressing the browse button.
        list($txt, $ext) = explode(".", $name); //extract the name and extension of the file
        if (in_array($ext, $valid_formats)) { //if the file is valid go on.
           // if ($size < 2098888) { // check if the file size is more than 2 mb
                $file_name = uniqid()."test"; //get the file name
                $tmp = $_FILES['myfile']['tmp_name'];
                if (move_uploaded_file($tmp, $path . $file_name.'.'.$ext)) { //check if it the file move successfully.


                //    echo "File uploaded successfully!!";
                } else {
                    echo "failed";
                }
          //  } else {
              //  echo "File size max 2 MB";
            //}
        } else {
            echo "Invalid file format..";
        }
    } else {
        echo "Please select a file..!";
    }
$data['message'] = "asdads";
echo json_encode($data);
    exit;
}