Javascript: Subir un archivo without sin un archivo

Si no necesita soporte para navegadores más antiguos, puede usar el objeto FormData, que forma parte de la API de archivos:

var formData = new FormData();
var blob = new Blob(['Lorem ipsum'], { type: 'plain/text' });
formData.append('file', blob,'readme.txt');

var request = new XMLHttpRequest();
request.open('POST', 'http://example.org/upload');
request.send(formData);

La api de archivos es compatible con todos los navegadores actuales (IE10+)

• https://developer.mozilla.org/en-US/docs/Web/API/FormData
• http://caniuse.com/#feat=fileapi

Simplemente compartiendo el resultado final, que funciona-y tiene una forma limpia de agregar / eliminar parámetros sin codificar nada.

var boundary = '-----------------------------' +
            Math.floor(Math.random() * Math.pow(10, 8));

    /* Parameters go here */
var params = {
    file: {
        type: 'text/plain',
        filename: Path.utils.basename(currentTab.id),
        content: GET_CONTENT() /* File content goes here */
    },
    action: 'upload',
    overwrite: 'true',
    destination: '/'
};

var content = [];
for(var i in params) {
    content.push('--' + boundary);

    var mimeHeader = 'Content-Disposition: form-data; name="'+i+'"; ';
    if(params[i].filename)
        mimeHeader += 'filename="'+ params[i].filename +'";';
    content.push(mimeHeader);

    if(params[i].type)
        content.push('Content-Type: ' + params[i].type);

    content.push('');
    content.push(params[i].content || params[i]);
};

    /* Use your favorite toolkit here */
    /* it should still work if you can control headers and POST raw data */
Ext.Ajax.request({
    method: 'POST',
    url: 'www.example.com/upload.php',
    jsonData: content.join('\r\n'),
    headers: {
        'Content-Type': 'multipart/form-data; boundary=' + boundary,
        'Content-Length': content.length
    }
});

Esto fue probado para funcionar en todos los navegadores modernos, incluyendo pero no limitado a:

• IE6 +
• FF 1,5 +
• Opera 9 +
• Cromo 1.0 +
• Safari 3.0 +

A file upload es solo una solicitud POST con el contenido del archivo correctamente codificado y con un encabezado especial multipart/formdata. Debe usar <input type=file /> porque la seguridad de su navegador le prohíbe acceder directamente al disco del usuario.

Como no necesitas leer el disco del usuario, SÍ, puedes fingirlo usando Javascript. Será solo un XMLHttpRequest. Para falsificar una solicitud de carga "auténtica", puede instalar Fiddler e inspeccione su solicitud saliente.

Tendrá que codificar ese archivo correctamente, por lo que este enlace puede ser muy útil: RFC 2388: Devolver Valores de Formularios: multipart/form-data

Acabo de atrapar esta cadena POST_DATA con el complemento Firefox TamperData. Envié un formulario con un campo type="file" llamado "myfile" y un botón de envío llamado "btn-submit" con el valor "Upload". El contenido del archivo cargado es

Line One
Line Two
Line Three

Así que aquí está la cadena POST_DATA:

-----------------------------192642264827446\r\n
Content-Disposition: form-data;    \n
name="myfile"; filename="local-file-name.txt"\r\n
Content-Type: text/plain\r\n
\r\n
Line \n
One\r\n
Line Two\r\n
Line Three\r\n
\r\n
-----------------------------192642264827446\n
\r\n
Content-Disposition: form-data; name="btn-submit"\r\n
\r\n
Upload\n
\r\n
-----------------------------192642264827446--\r\n

No estoy seguro de lo que significa el número (192642264827446), pero eso no debería ser demasiado difícil de averiguar.

Https://stackoverflow.com/a/2198524/2914587 funcionó para mí, después de agregar un extra '--' antes del final boundary en la carga útil:

var body = '--' + boundary + '\r\n'
         // Parameter name is "file" and local filename is "temp.txt"
         + 'Content-Disposition: form-data; name="file";'
         + 'filename="temp.txt"\r\n'
         // Add the file's mime-type
         + 'Content-type: plain/text\r\n\r\n'
         + data + '\r\n'
         + '--' + boundary + '--';

Una forma fácil de imitar la carga de archivos" falsos " con jQuery:

var fd = new FormData();
var file = new Blob(['file contents'], {type: 'plain/text'});

fd.append('formFieldName', file, 'fileName.txt');

$.ajax({
  url: 'http://example.com/yourAddress',
  method: 'post',
  data: fd,
  processData: false,        //this...
  contentType: false         //and this is for formData type
});