web-dev-qa-db-ja.com

js：JSON.stringifyなどのjsonへの入力ファイル

HTML入力ファイルを次のようなjson文字列に変換します。

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

さて、私のfirebugで：

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

jsonStringが空なのはなぜですか？

背景情報：jsonpを含むファイル参照を別のphpサーバーに送信したい

追加情報：ファイルポインター（参照）のみを文字列に変換し、GETで送信します。

javascriptjqueryjsonhtml5file
29
peacemaker

JSON.Stringify with File API （Fileオブジェクトを文字列に変換）chrome、firefoxおよびsafariブラウザーで動作しません（Fileオブジェクトを{}に変換します）[その理由がわかりませんでした]

JSON.Stringifyを使用して、Fileオブジェクトを文字列に変換する回避策を講じることができます。

例：

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

別の解決策：Fileオブジェクトに toJSON（）動作 を追加できます

例：

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

注：File動詞を使用してPOSTオブジェクトをサーバーに送信

9
ahmed hamdy

FileReader API を使用してファイルの内容を読み取る必要があります。 Fileオブジェクトにはファイルの内容は含まれません（これはファイルへの単なるポインタであり、後で読み取ることができます）。

この HTML5Rocksの記事 をチェックして、この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

まだ誰かがこれに対する解決策を探している場合は、別の投稿で 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()" />
3
Tammy Tee