Можно изменить размер изображения на входе

Question

Я хочу изменить размер изображения, и я могу с кодом ниже, но когда я хочу загрузить с php, я не могу изменить новое изображение с измененным размером с полем ввода.А также, если это возможно, я хочу, чтобы этот код работал для нескольких файлов.

<script type="text/javascript">
        var fileReader = new FileReader();
        var filterType = /^(?:image\/bmp|image\/cis\- cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;

    fileReader.onload = function (event) {
      var image = new Image();

      image.onload=function(){
          document.getElementById("original-Img").src=image.src;
          var canvas=document.createElement("canvas");
          var context=canvas.getContext("2d");
          canvas.width=image.width/4;
          canvas.height=image.height/4;
          context.drawImage(image,
              0,
              0,
              image.width,
              image.height,
              0,
              0,
              canvas.width,
              canvas.height
          );

          document.getElementById("upload-Preview").src = canvas.toDataURL();





      }
      image.src=event.target.result;


    };

    var loadImageFile = function () {
      var uploadImage = document.getElementById("upload-Image");

      //check and retuns the length of uploded file.
      if (uploadImage.files.length === 0) {
        return;
      }

      //Is Used for validate a valid file.
      var uploadFile = document.getElementById("upload-Image").files[0];
      if (!filterType.test(uploadFile.type)) {
        alert("Please select a valid image.");
        return;
      }

      fileReader.readAsDataURL(uploadFile);
    }

этот javascript изменил размер моего кода, но измененное изображение было передано в img.Я хочу изменить с оригинальным с входом.

            <input id="upload-Image" type="file"  name="dosya[]" 
             onchange="loadImageFile();" multiple="multiple" class="form-control"/>

            Origal Img - <img id="original-Img"/>

            Compress Img - <img id="upload-Preview"/>