I am trying to upload files using html. Uploading images works fine. Most of the gifs also work fine. But some gifs and all videos are not working.
From the client side, I see that the file exists, and the file size is greater than 0. However, on the server side, I get 0 for the file size. I would like to know if there is anything else I need to consider for gifs and videos.
Here is the code.

<input  accept=".jpg,.jpeg,.png,.gif,.mp4" id="input-filename" name="" type="file">

console.log(document.getElementById('input-file').files[0]) returns

File { name: "dancing-baby.mp4", lastModified: 1662709502657, webkitRelativePath: "", size: 28739050, type: "video/mp4" }

Client-side code

$(document).on('change', '#input-filename', function (e){
var form_data = new FormData();
var oFReader = new FileReader();
var f = document.getElementById('input-filename').files[0];
console.log(f)
oFReader.readAsDataURL(f);    

var fsize = f.size||f.fileSize;

form_data.append("uploaded_file", f);
$.ajax({
        url: 'handle_file.php',
        method:"POST",
        data: form_data,
        contentType: false,
        cache: false,
        processData: false,
        beforeSend:function(){
        // ...
        },
    success:function(data)
    {
        console.log(data);
    }
});
}

Server side code

if(isset($_FILES["uploaded_file"]["name"]) && $_FILES["uploaded_file"]["name"] != ''){
    $filepath = $_FILES['uploaded_file']['name'];   
    $fileSize = $_FILES['uploaded_file']['size'];   
    print json_encode(array('message' => "add a message", 'img_details' =>  $filepath . ' ' . $fileSize, 'code' => 1));
        exit();
}

CodePudding user response：

Did you check the upload limit on your current host? That might be the reason why you can't upload video files.

CodePudding user response：

Try this code

// Upload file
function uploadFile() {

   var files = document.getElementById("file").files;

   if(files.length > 0 ){

      var formData = new FormData();
      formData.append("file", files[0]);

      var xhttp = new XMLHttpRequest();

      // Set POST method and ajax file path
      xhttp.open("POST", "ajaxfile.php", true);

      // call on request changes state
      xhttp.onreadystatechange = function() {
         if (this.readyState == 4 && this.status == 200) {

           var response = this.responseText;
           if(response == 1){
              alert("Upload successfully.");
           }else{
              alert("File not uploaded.");
           }
         }
      };

      // Send request with data
      xhttp.send(formData);

   }else{
      alert("Please select a file");
   }

}

<div >
  <input type="file" name="file" id="file">
  <input type="button" id="btn_uploadfile" 
     value="Upload" 
     onclick="uploadFile();" >
</div>

Php code

<?php

if(isset($_FILES['file']['name'])){
   // file name
   $filename = $_FILES['file']['name'];

   // Location
   $location = 'upload/'.$filename;

   // file extension
   $file_extension = pathinfo($location, PATHINFO_EXTENSION);
   $file_extension = strtolower($file_extension);

   // Valid extensions
   $valid_ext = array("pdf","doc","docx","jpg","png","jpeg");

   $response = 0;
   if(in_array($file_extension,$valid_ext)){
      // Upload file
      if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
         $response = 1;
      } 
   }

   echo $response;
   exit;
}