ajax向delphi11 上传图片显示到Timage

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

1. 在Delphi 11中创建一个新的Web应用程序项目。
2. 在项目中添加一个TWebModule组件，用于处理Web请求。
3. 添加一个TImage组件到Web模块上。
4. 在TWebModule的OnDefaultHandler事件中添加以下代码：

procedure TMyWebModule.WebModuleDefaultHandlerAction(Sender: TObject;
  Request: TWebRequest; Response: TWebResponse; var Handled: Boolean);
var
  FileName: string;
begin
  if Request.ContentFields.Count > 0 then
  begin
    FileName := ExtractFileName(Request.ContentFields.Values['file']);
    if SameText(ExtractFileExt(FileName), '.jpg') or
       SameText(ExtractFileExt(FileName), '.jpeg') or
       SameText(ExtractFileExt(FileName), '.png') then
    begin
      Image1.Picture.LoadFromFile(FileName);
      Response.Content := 'File uploaded successfully.';
    end
    else
      Response.Content := 'Invalid file format.';
  end
  else
    Response.Content := 'No file uploaded.';
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', '/upload');
  xhr.send(formData);
  xhr.onload = function() {
    alert(xhr.responseText);
  };
}

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

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

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