downsizing image - input type="file"

Question

I will downsize an image while uploading from user. The shown javascript is needed for a image preview on the first page. So the user can change the image during he is on the first page (upload.php)

upload.php

function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
          
            reader.onload = function (e) 
   {
                $('#preview').attr('src', e.target.result);
   }
            
            reader.readAsDataURL(input.files[0]);
        }
    }
    
    $("#imgPrev").change(function(){
        readURL(this);
    });

    <form action="/2nd-page.php" method="post" enctype="multipart/form-data">
    <div class="upload">
    <span class="btn btn-default btn-file">
    <input type="file" name="imgPrev" id="imgPrev" accept="image/jpg,image/gif">
    </span>
    </div>
    <div class="div-preview">
    <img name="preview" id="preview" style="max-width:360px;" height="100%" src="#" class="img-rounded" alt="">
    </div>
    </form>

2nd-page.php

  if(!empty($_FILES["imgPrev"]["name"])) 
  {
   //Upload new Image in Directory
   $temp = explode(".", $_FILES["imgPrev"]["name"]);
   $filename = round(microtime(true)) . '.' . end($temp);
   //$_SESSION['tmp_filename'] = $filename;
   move_uploaded_file($_FILES["imgPrev"]["tmp_name"],$dir.'/'.$filename);
  }

Is there a possibility to downsize images while uploading from user? The problem is, that the 2nd-page.php takes too long to load, when user upload huge images. :-(

Thanks for your support in advance.

Greets, Yab86