不通过XMLHttpRequest提交表单，能否实现FormData内容追加？

适配需求的实现方案 #

该方案完全符合渐进式增强要求，无需修改后端逻辑，也不需要用XMLHttpRequest处理提交和重定向：

• 给现有上传表单绑定submit事件监听，不要直接阻止默认提交行为，仅在用户填入远程图片URL时做增强处理
• 你已经实现了远程URL转Blob的逻辑，拿到Blob后将其转为File对象：

  // blob为你已生成的远程图片Blob对象
  const remoteImgFile = new File([blob], 'remote_upload.jpg', {
    type: blob.type
  })
  

• 动态创建隐藏的文件输入控件，把生成的File塞进去后追加到表单中：

  const hiddenFileInput = document.createElement('input')
  hiddenFileInput.type = 'file'
  hiddenFileInput.name = 'upload_img' // 和你现有表单上传文件的字段名保持一致即可
  hiddenFileInput.hidden = true
  // 给文件控件赋值
  const dataTransfer = new DataTransfer()
  dataTransfer.items.add(remoteImgFile)
  hiddenFileInput.files = dataTransfer.files
  // 追加到表单
  document.querySelector('#你的表单ID').appendChild(hiddenFileInput)
  

• 不需要做额外处理，直接让表单走原生提交流程即可，后端PHP会把这个动态生成的文件当成普通上传文件处理，原本的重定向逻辑完全不受影响

兼容说明 #

• 该方案仅用到标准Web API，不需要jQuery，代码量极少
• 如果用户禁用了JavaScript，表单会正常提交，你原本后端用curl拉取远程图片的逻辑可以正常兜底
• 不需要处理XMLHttpRequest的重定向逻辑，后端不需要做任何适配调整

内容的提问来源于stack exchange，提问作者jdf