Showing posts with label jQuery Ajax File upload with Percentage Progress bar. Show all posts
Showing posts with label jQuery Ajax File upload with Percentage Progress bar. Show all posts

Tuesday 8 August 2017

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;
}