ajax向delphi11 indy 上传图片显示到Timage

您可以使用Indy组件来创建一个Web服务，使用TImage组件来显示上传的图片。以下是一个简单的示例：

1. 在Delphi 11中创建一个新的VCL应用程序项目。
2. 在项目中添加一个TIdHTTPServer组件，用于处理HTTP请求。
3. 添加一个TImage组件到主窗体上。
4. 在TIdHTTPServer的OnCommandGet事件中添加以下代码：

procedure TForm1.IdHTTPServer1CommandGet(AContext: TIdContext;
  ARequestInfo: TIdHTTPRequestInfo; AResponseInfo: TIdHTTPResponseInfo);
var
  Stream: TMemoryStream;
  FileName: string;
begin
  if SameText(ARequestInfo.Command, 'POST') then
  begin
    if ARequestInfo.ContentType = 'image/jpeg' then
    begin
      FileName := ExtractFileName(ARequestInfo.Document);
      Stream := TMemoryStream.Create;
      try
        ARequestInfo.PostStream.Position := 0;
        Stream.CopyFrom(ARequestInfo.PostStream, ARequestInfo.ContentLength);
        Stream.Position := 0;
        Image1.Picture.LoadFromStream(Stream);
        AResponseInfo.ResponseNo := 200;
        AResponseInfo.ResponseText := 'OK';
      finally
        Stream.Free;
      end;
    end
    else
    begin
      AResponseInfo.ResponseNo := 400;
      AResponseInfo.ResponseText := 'Bad Request';
    end;
  end
  else
  begin
    AResponseInfo.ResponseNo := 405;
    AResponseInfo.ResponseText := 'Method Not Allowed';
  end;
end;

5. 在客户端使用AJAX技术上传图片。以下是一个简单的示例：

function uploadFile() {
  var fileInput = document.getElementById('fileInput');
  var file = fileInput.files[0];
  var formData = new FormData();
  formData.append('file', file);
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/image.jpg');
  xhr.setRequestHeader('Content-Type', 'image/jpeg');
  xhr.send(formData);
  xhr.onload = function() {
    alert(xhr.responseText);
  };
}

6. 在HTML中添加一个文件上传控件和一个按钮。以下是一个简单的示例：

<input type="file" id="fileInput" />
<button onclick="uploadFile()">Upload</button>

这样，当用户选择一个图片文件并点击上传按钮时，图片将被上传到Indy服务器并显示在TImage组件上。