web-dev-qa-db-fra.com

js: fichier d'entrée dans json avec par exemple JSON.stringify

Je veux convertir un fichier d'entrée html en une chaîne json comme ceci:

var jsonString = JSON.stringify(file);
console.log( file );
console.log( jsonString );

Maintenant, dans mon firebug:

File { size=360195, type="image/jpeg", name="xyz.jpg", mehr...} 
Object {}

Pourquoi le jsonString est-il vide?

Informations générales: je veux envoyer la référence du fichier avec jsonp à un autre serveur php

Informations supplémentaires: Je souhaite convertir uniquement le pointeur de fichier (référence) en une chaîne, pour l'envoyer via GET.

javascriptjqueryjsonhtml5file
29
peacemaker

JSON.Stringify avec API de fichier (convertir File objet en chaîne) dans chrome, firefox et safari le navigateur ne fonctionne pas ( convertir File objet en {}) [Je ne connaissais pas la raison de cela]

Vous pouvez contourner pour convertir File objet en chaîne à l'aide de JSON.Stringify

Ex:

// get File Object  
var fileObject = getFile();

// reCreate new Object and set File Data into it
var newObject  = {
   'lastModified'     : fileObject.lastModified,
   'lastModifiedDate' : fileObject.lastModifiedDate,
   'name'             : fileObject.name,
   'size'             : fileObject.size,
   'type'             : fileObject.type
};  

// then use JSON.stringify on new object
JSON.stringify(newObject);

Une autre solution : vous pouvez ajouter comportement toJSON () à votre objet File

EX:

   // get File Object  
    var fileObject = getFile();

    // implement toJSON() behavior  
    fileObject.toJSON = function() { return {
       'lastModified'     : myFile.lastModified,
       'lastModifiedDate' : myFile.lastModifiedDate,
       'name'             : myFile.name,
       'size'             : myFile.size,
       'type'             : myFile.type 
    };}  

    // then use JSON.stringify on File object
    JSON.stringify(fileObject);

Notes : envoyer File objet au serveur en utilisant POST verbe

9
ahmed hamdy

Vous devez lire le contenu du fichier en utilisant FileReader API . L'objet File ne contient pas le contenu du fichier (c'est juste un pointeur vers le fichier, qui vous permet de le lire plus tard).

Vous pouvez consulter ceci article HTML5Rocks pour en savoir plus sur l'utilisation de cette API.

var file = getAFile( );

var success = function ( content ) {
  console.log( JSON.stringify( content ) ); }

var fileReader = new FileReader( );
fileReader.onload = function ( evt ) { success( evt.target.result ) };
fileReader.readAsText( file );
5
Maël Nison

Dans le cas où quelqu'un cherche toujours une solution à cela, veuillez voir ma réponse sur un autre poste et exemple de travail sur JSFiddle.

JS:

function getFiles(){
    var files = document.getElementById("myFiles").files;
    var myArray = [];
    var file = {};

    console.log(files); // see the FileList

    // manually create a new file obj for each File in the FileList
    for(var i = 0; i < files.length; i++){

      file = {
          'lastMod'    : files[i].lastModified,
          'lastModDate': files[i].lastModifiedDate,
          'name'       : files[i].name,
          'size'       : files[i].size,
          'type'       : files[i].type,
      } 

      //add the file obj to your array
      myArray.Push(file)
    }

    //stringify array
    console.log(JSON.stringify(myArray));
}

HTML:

<input id="myFiles" type="file" multiple onchange="getFiles()" />
3
Tammy Tee