JS: plik wejściowy do JSON z np JSON.stringify

Question

Chcę przekonwertować plik wejściowy html na ciąg json jak ten:

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

Teraz, moim Firebug:

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

Dlaczego jsonString jest pusty?

Informacje ogólne: Chcę wysłać plik referencję z jsonp do innego serwera php

Dodatkowe informacje: Chcę przekonwertować tylko plik-pointer (odniesienia) do łańcucha, aby wysłać go poprzez GET.

Answer 1

Musisz przeczytać zawartość pliku, używając FileReader API. Obiekt File nie zawiera treści pliku (jest tylko wskaźnikiem w kierunku pliku, który umożliwia odczytanie go później).

Możesz sprawdzić to HTML5Rocks article, aby dowiedzieć się więcej o korzystaniu z tego interfejsu 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); 

Answer 2

JSON.Stringify z File API (konwertować File obiektu do string) w chrome, firefox i safari przeglądarka nie działa (konwersji File sprzeciw wobec {}) [nie znałem przyczyny, że]

Ty możliwe, uczynić pracę wokół przekonwertować File obiektu do łańcucha za pomocą 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); 

Innym rozwiązaniem: można dodać toJSON() behavior do obiektu 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); 

Uwagi: wyślij File obiekt do serwera przy użyciu POST czasownik

Answer 3

W przypadku ktokolwiek wciąż szuka rozwiązania to zobacz my answer na innym poście i working example na 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()" />