用html实现可以输入文字和图片的输入框

在 HTML 中实现可以输入文字和图片的输入框可以结合使用 `input` 和 `img` 元素，以及 `FormData` 对象实现图片上传功能。

首先，在 HTML 模板中使用 `input` 元素实现文本输入框，使用 `input` 元素的 `type="file"` 属性实现图片上传功能：

<form>
  <textarea></textarea>
  <input type="file" accept="image/*">
  <button type="submit">提交</button>
</form>

接下来，使用 JavaScript 获取用户输入的文本和图片，将图片转换为 Base64 编码或通过 Ajax 请求上传至服务器：

const form = document.querySelector('form')
const textarea = form.querySelector('textarea')
const input = form.querySelector('input[type="file"]')

form.addEventListener('submit', function (event) {
  event.preventDefault()
  
  const text = textarea.value
  const file = input.files[0]

  const formData = new FormData()
  formData.append('text', text)

  if (file) {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = function (event) {
      formData.append('image', event.target.result)
      submit(formData)
    }
  } else {
    submit(formData)
  }
})

function submit(formData) {
  // 使用 Ajax 请求提交表单数据
}

上述代码中，使用 `FormData` 对象创建一个表单数据，将文本和图片数据添加到表单中，最后通过 Ajax 请求将表单数据提交到服务器。如果用户没有选择图片，则直接提交文本数据。在上传图片时，使用 `FileReader` 对象将图片转换为 Base64 编码，然后将其添加到表单数据中。