问题出现的原因是在文件选择后立即上传图片。解决方法是使用IaaS（基础设施即服务）进行文件上传，如Uploadcare。只需将JS库添加到页面的头部，然后将文件输入替换为在表单中特别标记的隐藏输入。这样一来，一旦选择文件（从本地驱动器、URL、Dropbox/Box/GoogleDrive/Facebook/Instagram等）或将文件拖放到小部件上，上传就会立即开始。表单将向服务器发送已上传文件的UUID，以便您可以存储对其的引用。

问题：(Upload image immediately after file is chosen)这个问题的出现原因以及解决方法

原因：问题是因为当前的文件上传功能在选择文件后没有立即上传图片，而是需要用户手动触发上传动作。

解决方法：使用fine-uploader库可以解决这个问题。fine-uploader库支持在选择文件后立即开始上传图片。此外，它还支持拖放功能和多文件上传。

代码示例：

使用fine-uploader库，将autoUpload选项设置为true，即可在选择文件后立即自动上传图片。

更多详细的功能和配置，请参考fine-uploader的官方文档：https://github.com/Widen/fine-uploader。

问题的出现原因：

问题是在用户选择文件后立即上传图像。在给出的代码中，当用户选择文件时，将触发change事件，然后会调用GetBase64函数来获取文件的Base64编码字符串。然后，该字符串被传递给UploadFile函数来将文件上传到服务器。然而，问题是在代码中没有提供将数据传递给服务器的方法，因此无法实现文件的上传。

解决方法：

要解决这个问题，我们需要修改代码以便将数据传递给服务器进行文件上传。以下是修改后的代码示例：

$(document).on("change", ".custom-file-input", this, function(e){       
   GetBase64( e.target );
});
function GetBase64( input ) {
   if ( input.files && input.files[0] ) {
      var FR= new FileReader();
      FR.onload = function(e) {
         var str = e.target.result;
         /* preview it ( if you wanted to ) */
         $('#preview-img').attr( "src", str );
         /* upload it to server */
         UploadFile(  str );
      };       
      FR.readAsDataURL( input.files[0] );
   }
}
function UploadFile( file_str ) {
   console.log( file_str );
   /* use $.ajax to upload your file */
   $.ajax({
      url: "upload.php",
      type: "POST",
      data: { file: file_str },
      success: function(response) {
         console.log(response);
      },
      error: function(xhr, status, error) {
         console.log(error);
      }
   });
}

在修改后的代码中，我们通过使用jQuery的$.ajax函数将文件数据作为POST请求的数据发送到服务器。在这个例子中，数据被命名为"file"并传递给服务器。服务器端需要相应的代码来接收并处理这个数据。

在PHP中，可以使用$_POST来接收这个数据，并将文件保存到服务器上。以下是一个示例：

在这个示例中，我们使用$_POST来获取通过POST请求发送的数据。然后，我们将Base64编码的字符串拆分，并将解码后的文件内容写入到服务器上的文件中。

通过对代码进行这些修改，现在可以实现在用户选择文件后立即上传图像的功能。