Question

我有一个这样的IMG标签：

<img src="test.jpeg" className="Test" alt="Test" height="42" width="42">

但是我必须通过xmlHttpRequest将test.jpeg发送到网站，该怎么做使用XmlHttpRequest（）。 related question is here，但是它使用GET来填充DOM。问题是使用带有XMLHttpRequest的POST发送“ test.jpeg”文件。

Answer 1

var formData = new FormData();

formData.append("inp", document.getElementById("inp").files[0]);

var request = new XMLHttpRequest();
request.open("POST", "http://yourdomain.com/submit.php");
request.send(formData);

您的html代码：

<input id="inp" type='file'>

Answer 2

您可以发送以base64编码的图像

.spotlight-container {
  position: relative;
}

图像编码将作为值添加到＃b64隐藏输入

中

function readFile() {

  if (this.files && this.files[0]) {

    var FR= new FileReader();

    FR.addEventListener("load", function(e) {
      document.getElementById("b64").value     = e.target.result;
    }); 

    FR.readAsDataURL( this.files[0] );
  }

}

document.getElementById("inp").addEventListener("change", readFile);

顺便说一句，您可以触发readFile提交事件，请确保正确选择输入文件。

如果您的服务器是PHP，请使用此功能保存图像：

<input id="inp" type='file'>
<input id="b64" type='hidden' name='b64'>

如何使用带有XMLHttpRequest的POST将JPEG文件发送到服务器？

2 个答案: