1. Create html form

  <form class="fpd-upload-form" enctype="multipart/form-data" method="POST">
    <div class="fpd-upload-zone">
      <input type="file" multiple="multiple" class="fpd-input-image" id="fpd_upload_file" name="files[]">
    </div>
  </form>

2. Jquery Code

<script>
$('#fpd_upload_file').on('change', function(){    
  //on change event  
  var fd = new FormData();
  var files = $('#fpd_upload_file')[0].files[0];
  fd.append('file', files);
    $.ajax({
      url: 'your-server-file-path/upload.php',
      type: "POST",
      data: fd,
      processData: false,
      contentType: false,
      success: function (result) {
          if(result != 0){
              console.log(JSON.parse(result), result.name);
          }
          else{
              alert('file not uploaded');
          }
        }
      });
  });
</script>

3. create upload.php file on your server

    <?php
       header('Access-Control-Allow-Origin: *');
      /* Getting file name */
      $filename = $_FILES['file']['name'];

      /* Location */
      $location = "uploads/".$filename;
      $uploadOk = 1;

      if($uploadOk == 0){
         echo 0;
      }else{
         /* Upload file */
         if(move_uploaded_file($_FILES['file']['tmp_name'], $location)){
            $image['name'] = $filename;
            $image['url'] = 'your-server-folder-address'.$location; //for full image url with server
             $json = json_encode($image);
             echo $json;
         }else{
            echo 0;
         }
      }
      ?>

0 Comments

Leave a Comment