загрузить в php $ _FILE из расширения Chrome

Question

Я пытаюсь загрузить изображение через POST с помощью javascript на сайт, для которого я не могу изменить источник.

На странице есть форма, позволяющая загружать изображения:
<form enctype="multipart/form-data" action="/u.php" method="post"> <input name="file" type="file"> <input type="submit" value="Upload File"> </form>

Я хочу иметь возможность загружать изображения с помощью javascript, но я не могу заставить что-либо работать, я не уверен, возможно ли это вообще ...

Мой JS такдалеко:

file = document.getElementById('fileinput').files[0];
r = new FileReader();
r.onloadend = doUpload;
r.readAsBinaryString(file)

function doUpload(el){
    file = el.target.result;
XMLHttpRequest.prototype.sendAsBinary = function(string) {
    var bytes = Array.prototype.map.call(string, function(c) {
      return c.charCodeAt(0) & 0xff;
    });
    this.send(new Uint8Array(bytes).buffer);
  };
        var xhr = new XMLHttpRequest();
  xhr.open('POST', 'http://upload.domain.com/u.php', true);
  var boundary = 'ohaiimaboundary';
  xhr.setRequestHeader(
    'Content-Type', 'multipart/form-data; boundary=' + boundary);
  xhr.sendAsBinary([
    '--' + boundary,
    'Content-Disposition: form-data; name="file"; filename="test.jpg"',
    'Content-Type: multipart/form-data',
    '',
    file,
    '--' + boundary + '--'
  ].join('\r\n'));

}

Спасибо

РЕДАКТИРОВАТЬ: понял это, вроде, это должно работать с небольшой модификацией (в жестком коде png)

function doUpload(fl){
    var file = fl.target.result;
    XMLHttpRequest.prototype.sendAsBinary = function(datastr) {
            var bb = new BlobBuilder();
            var data = new ArrayBuffer(1);
            var ui8a = new Uint8Array(data, 0);
            for (var i in datastr) {
                    if (datastr.hasOwnProperty(i)) {
                            var chr = datastr[i];
                            var charcode = chr.charCodeAt(0)
                            var lowbyte = (charcode & 0xff)
                            ui8a[0] = lowbyte;
                            bb.append(data);
                    }
            }
            var blob = bb.getBlob();
            this.send(blob);
    }
    var xh = new XMLHttpRequest();
    xh.open('post', 'http://upload.domain.com/u.php', true);
    xh.onreadystatechange = function(){
        if(this.readyState != 4){
            return;
        }
        else{
            console.log(this.responseText);
        }
    };
    var boundary = '--fgsfds--';
    xh.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
    xh.sendAsBinary([
        '--' + boundary,
        'Content-Type: image/png',
        'Content-Disposition: form-data; name="file"; filename="testz.png"',
        '',
        file,
        '--' + boundary + '--',
        ''].join('\n'));
}   
function mkUpload(){
    var r = new FileReader();
    r.onloadend = doUpload;
    r.readAsBinaryString(document.upload.file.files[0]);
}

test PHP:

&lt?
echo sprintf('<pre>%s

', print_r ($ _ FILES, true));?>

Answer 1

На самом деле, вы пробовали xhr.send(FormData)? FormData позволяет вам Добавить объект File, который будет обрабатываться как двоичный контент и использовать он с XHR отправляет multipart / form-data. Там нет необходимости строить это самостоятельно.

var formData = new FormData();

var file = document.querySelector('input[type="file"]').files[0];
if (file) {
  formData.append("file", file);
}

var xhr = new XMLHttpRequest();
xhr.open('POST', '/u.php', true);
xhr.onload = function(e) { ... };
xhr.send(formData);