web-dev-qa-db-fra.com

Type d'entrée = "fichier" définir les données d'image base64

J'ai un canevas et récupère les données d'image avec l'aide de canvas.toDataURL('image/png').

Problème: <input type="file" /> veut que filepath soit value au lieu de base64.

Question: Comment envoyer des données d'image base64 au serveur à l'aide de <input type="file" /> SANS les enregistrer sur le système de fichiers local?

Mes solutions de contournement: Entrée masquée <input type="file" /> essayée, mais le serveur requiert la propriété filename

Peut-être que c'est possible de surmonter cela avec XmlHttpRequest?

javascripthtmlajaxhtml5-canvas
9
VB_

Créez simplement un élément d’entrée caché dans votre formulaire. (notez le type )

<input type="hidden" name="myHiddenField">

Associez vos données à la valeur de l'élément avant de les soumettre.

var imageData = canvas.toDataURL('image/png');
document.getElementsByName("myHiddenField")[0].setAttribute("value", imageData);

METTRE À JOUR

Si votre serveur exige que le paramètre "nom de fichier" soit présent dans les données soumises, incluez cette chaîne comme nom de l'élément input. 

<input type="hidden" name="filename"/>

Cela trompera le formulaire pour soumettre vos données avec le paramètre "nom de fichier" inclus.

Si vous souhaitez utiliser XMLHttpRequest pour cela, voici un exemple:

//Prepare data to be sent
var imageData = canvas.toDataURL('image/png');
var params = "filename=" + imageData;

//Initiate the request
var httpRequest = new XMLHttpRequest();            
httpRequest.open('POST', 'test.php', true);

//Send proper headers
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
httpRequest.setRequestHeader("Content-length", params.length);
httpRequest.setRequestHeader("Connection", "close");

//Send your data
httpRequest.send(params);
9
Charlie H

Vous pouvez utiliser FileReader, voir des exemples ici: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

0
Natural Lam