cómo especificar datos binarios en la función de publicación de jquery

Question

Tengo una captura de pantalla como cadena binaria. Me gustaría publicar algunos datos en el servidor usando la función $ .post().

Mi código:

var filename = "screenshot.jpg": 
var filedataUrl = "";// string like 'data:image/jpeg;base64,/9j/4A .....' 

$.post(serverUrl, { 
title: title 
name: name 

/*here must be my file */ 

}, function(response) { 
       alert('ok'); 
}); 

¿Cómo puedo especificar parámetros como archivo adjunto?

Answer 1

Tendrá que hacer algunas cosas.

Primero deberá desglosar el archivodataUrl. Solo quieres los datos de base64, no el resto. A continuación, utilice los métodos en Base64 encoding and decoding in client-side Javascript para base64 decodificar la cadena en datos binarios que contienen variables.

Luego incluya esa variable en su solicitud de publicación.

Answer 2

No creo que pueda cargar la imagen con un nombre de archivo. Es posible que necesite crear un formulario con un elemento de entrada de archivo donde el usuario pueda elegir un archivo (no a través de javascript).

Luego envíe el formulario usando AJAX.

Answer 3

Uso data

Ejemplo:

$.post({ 
    url: serverUrl, 
    data: { 
    'fileasstring': filedataUrl 
    }, 
    success: function(response) { 
    alert('ok'); 
    } 
}); 

Ver: http://api.jquery.com/jQuery.post/

Answer 4

Técnicamente base 64 es una representación de texto de datos binarios - si estás bien con esto anteriores respuestas son correctas. Si desea enviar datos binarios reales, debe usar FormData.

Si estoy leyendo su pregunta correctamente, está guardando html "captura de pantalla" en el elemento canvas. Si es así, en lugar de leer toDataURL, debe usar toBlob. Esto le dará datos binarios que podemos enviar mediante FormData

var form = new FormData(); 

form.append('image', blob, 'image.jpg'); 

anteriores se pueden enviar mediante regulares XMLHttpRequest:

var request = new XMLHttpRequest(); 

request.open('POST', 'http://foo.com/submitform.php'); 
request.send(form); 

Ejemplo de trabajo ->codepen

Si se mira en inspector de cromo verá que se crea la solicitud correcta de varias partes:

------WebKitFormBoundaryGWsPW93HnMPQFcXB 
Content-Disposition: form-data; name="image"; filename="image.jpg" 
Content-Type: image/jpeg 

------WebKitFormBoundaryGWsPW93HnMPQFcXB-- 

También puede enviar por encima de formulario con jQuery:

$.ajax({ 
    url: 'http://foo.com/submitform.php', 
    type: 'POST', 
    data: form, 
    processData: false, 
    contentType: false 
}); 

actualización

Acabo de ver el aviso sobre el manejo de la carga de archivos en el lado del servidor en PHP. El archivo cargado está disponible en array $ _FILES:

imagen

<?php 
    $uploaddir = '/var/www/uploads/'; 
    $uploadfile = $uploaddir . basename($_FILES['image']['name']); 
    if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile)) { 
     echo "File was successfully uploaded.\n"; 
    } else { 
     echo "Error"; 
    } 
    echo 'File info:'; 
    print_r($_FILES); 
?> 

Answer 5

base64 codificada es también una cadena normal. Puede pasarlo como data al jQuery POST.

Será como el siguiente.

var filename = "screenshot.jpg": 
var filedataUrl = "";// string like 'data:image/jpeg;base64,/9j/4A .....' 

$.post(serverUrl, { 
    title: title, 
    name: name, 
    image: filedataUrl, 
}) 
.done(function(res){ 
    alert('ok') 
})