2014-06-10 29 views
16

到JSON我想一個HTML輸入文件轉換成JSON字符串是這樣的:現在JS:輸入文件,例如JSON.stringify

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

,在我的螢火蟲:

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

爲什麼jsonString是空的?

背景信息:我想將文件引用與JSONP發送到另一個PHP服務器

附加信息:我只想文件指針(參考)轉換爲字符串,通過GET來發送。

+0

任何決議爲這個問題?在此先感謝 –

回答

0

您必須使用FileReader API來閱讀文件內容。 File對象不包含文件內容(它只是一個指向文件的指針,它允許您稍後閱讀它)。

你可以看看這個HTML5Rocks article瞭解更多關於這個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); 
+0

謝謝你的回答。我想發送指針到另一臺服務器。所以我必須將文件指針轉換爲一個字符串。你有好主意嗎? – peacemaker

+0

你看過這篇文章嗎? 'evt.target.result'是一個包含文件內容的字符串。出於安全原因,使用FileReader API是獲取它的唯一方法。 –

+0

我認爲這不是我項目中的解決方案。有一個問題,因爲我將用GET發送字符串。如果文件大小爲500 MB,則字符串的大小太長。 – peacemaker

5

JSON.StringifyFile API(轉換File對象爲string)在chromefirefoxsafari瀏覽器不工作(File對象轉換爲{})[我不知道其中的原因]

你可以讓周圍的工作使用File對象轉換爲字符串JSON.Stringify

例:

// 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); 

另一種解決方案: 你可以添加toJSON() behaviorFile對象

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); 

注意:使用POST動詞

+0

實際上,在Chrome中,您無法將「File」對象串起來。 – ffxsam

+0

是的,現在我用chrome中的File對象測試了'JSON.stringify'並且不起作用。但是當我回答這個問題的時候我已經測試過了 –

+0

呃......什麼? File API不能轉換爲String。見:http://stackoverflow.com/questions/19119040/how-do-i-save-and-restore-a-file-object-in-local-storage – williamle8300

2

發送File對象到服務器的情況下任何人仍在尋找解決方案請參閱另一篇文章的my answer以及JSFiddle上的working example

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()" />