我想将 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 发送。
【问题讨论】：
标签： javascript json file
无法在 Chrome、Firefox 和 Safari 中使用 JSON.stringify 直接将 File 对象转换为 JSON。
您可以使用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);
您还可以将toJSON() behavior 添加到您的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);
注意：使用POST HTTP 方法将File 对象发送到服务器。
【讨论】：
File 对象进行字符串化。
File 对象测试了 JSON.stringify 并且不起作用。但是当我回答这个问题时我已经测试过了
File对象作为JSON请求发送到PHP服务器，以便他想对File对象进行字符串化。你把它的问题链接，要求另一个案例也接受答案说：（你不能序列化File对象）->（这个问题的同样问题）。我的答案是 Stringify File Object
您必须使用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 );
【讨论】：
evt.target.result 是一个包含文件内容的字符串。出于安全原因，使用 FileReader API 是获取它的唯一方法。
如果有人仍在寻找解决方案，请参阅其他帖子上的 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()" />
【讨论】：
您只需要一个自定义替换器：
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"...}'
【讨论】：
我没有循环遍历，或者更确切地说是一个接一个地提取每个键，而是想出了这个函数，并且我已经使用了它的图像输入。
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
【讨论】：
当你传递一个 json 字符串时，Javascript 在内部将它转换为 Json 对象，因此不需要解析它。
如果是 json 文件，请按照步骤操作 ->
$('#inp_import_template')[0].files[0]
现在您的 json 文件已转换为 json 对象 (Javascript)。
【讨论】：
var obj = {
name: 'dashu3f'
};
var stringObj = JSON.stringify(obj);
console.log(typeof stringObj);
console.log(stringObj);
打开终端这个文件夹文件并运行node json.js
【讨论】：