Question

我想将html输入文件转换为json字符串，如下所示：

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发送。

Answer 1

在JSON.Stringify，File和chrome浏览器中{p} firefox File API（将safari对象转换为字符串）不起作用（转换{ {1}}对象File）[我不知道原因]

您可以使用{}

来解决File对象转换为字符串的问题

前：

JSON.Stringify

另一种解决方案：您可以将toJSON() behavior添加到// 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);对象

EX：

File

备注：使用// 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对象发送到服务器

Answer 2

您必须使用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 );

Answer 3

如果有人仍在寻找解决方案，请参阅另一篇文章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()" />

Answer 4

当您传递json字符串时，JavaScript在内部将其转换为Json对象，因此无需对其进行解析。

如果是json文件，请按照以下步骤操作->

$('#inp_import_template')[0].files[0]

现在，您的json文件已转换为json对象（Javascript）。

Answer 5

我没有使用循环功能，而是一个接一个地提取每个键，而是想出了此功能，并使用了它作为图像输入。

const fileObject = e.target.files[0];

重要通知

//dont use shorthand for of loop
for (const [key, value] in Object.entries(x)) 
it can't loop through a file object in JS

改为使用此代码

const imageObject = {};

for (const key in fileObject) {
    const value = fileObject[key];
    const notFunction = typeof value !== "function";
    notFunction && (imageObject[key] = value);
}

console.log(imageObject) // => should give you a normal JS object now

Answer 6

您只需要一个自定义替换器：

function stringify(obj) {
    const replacer = [];
    for (const key in obj) {
        replacer.push(key);
    }
    return JSON.stringify(obj, replacer);
}

const json = stringify(file);
console.log(file);
console.log(json);

现在您应该看到：

File {name: "xyz.jpg", type: "image/jpeg", size...}
'{"name":"xyz.jpg","type":"image/jpeg","size"...}'

Answer 7

var obj = {
  name: 'dashu3f'
};

var stringObj = JSON.stringify(obj);
console.log(typeof stringObj);
console.log(stringObj);

打开终端此文件夹文件并运行 node json.js

js：输入文件到json，例如JSON.stringify

7 个答案: