I want to send a picture of AJAX and get its data. I still don’t see any need for it for myself, but it has become interesting and so far not working. Specifically, my code:
HTML
<form id="myform"> <input type="file" name="filename"> <input type="button" name="button" value="Загрузить"> </form> Js
var form = document.forms.myform; form.elements.button.onclick = function(){ var file = form.elements.filename.files[0]; if(file){ img(); }else{ alert("Выберете файл."); } } function img(){ var formdata = new FormData(form.elements[0]); var xhr = new XMLHttpRequest(); xhr.upload.onprogress = function(e){ load.textContent = e.loaded + " / " + e.total; }; xhr.open('POST', 'img.php'); xhr.setRequestHeader('Content-Type', 'image/jpeg'); xhr.send(formdata); xhr.onreadystatechange = function(){ if(xhr.status != 200){ alert("Status: " + xhr.status); }else{ alert(xhr.responseText); } }; } Php
<?php error_reporting(-1); print_r($_FILE['filename']['size']); ?> The file was not transferred at all (of course, debugging showed it) And it was because of FormData () . It was necessary to transfer with append , but it had to work and already FormData (argument) . After that issues:
Warning: Missing boundary in multipart/form-data POST data in Unknown on line 0 ------WebKitFormBoundaryWmXgtD5Kn1xyTV8q Content-Disposition: form-data; name="filename"; filename="5f944a3ea1b8fcb56bd54f326666a04b.jpg" Content-Type: image/jpeg ÿØÿàJFIFHHÿÛC...
But for some reason you can't get the name from $ _FILES ['filename'] ['name']. + gives all this information only through php: // input.