如何读取附加为 formData.append 的 blob 内容

Question

I would like to be able to read and pass the innerHtml content of an entire div including all the sub-elements server-side using PHP. I have successfully managed to upload it as as a blob with

 function scriptSubmit() { var fd = new FormData(); var container = document.querySelector('.textbody').innerHTML; //get the div with text elements var blob = new Blob([container], { type: "text/html" }); fd.append('blob', blob, ); var xhr = new XMLHttpRequest(); xhr.open("POST", "scripts.php"); xhr.onreadystatechange = function(e) { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.status); } } xhr.send(fd); }

 <div class="textbody"> <div><span>sample text 1</span></div> <div><span>sample text 2</span></div> <div><span>sample text 3</span></div> <div>More sample text</div> </div> <button type="button" onclick="scriptSubmit()"> Submit <button>

(and getting server response == 200 on XMLHttpRequest) but i am having trouble reading the blob as plain text. My reason for doing this is I would like to be able to use the text as html input that I can parse server-side with another script or if possible within the same script. In short I would like to be guided on the server-side operations Thank you

Answer 1

Remove the last ',' int fd.append('blob', blob, ); .

Check your variable $_POST server side with var_dump.

For help u, u can create a div like <div id="output"></div> and print the server response by changing this if

if (xhr.readyState == 4 && xhr.status == 200) {
   console.log(xhr.status);
}

into this if

if (xhr.readyState == 4 && xhr.status == 200) {
   console.log(xhr.status);
   document.getElementById('output').innerHTML = xhr.responseText;
}

EDIT:

Data not in the $_POST but in the $_FILES