我想将 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 发送。
在 Chrome、Firefox 和 Safari 中无法直接将File对象转换为 JSON JSON.stringify。
您可以使用变通方法将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()行为添加到您的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使用POSTHTTP 方法将对象发送到服务器。
您必须使用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 );
如果有人仍在寻找解决方案，请在 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()" />
您只需要一个自定义替换器：
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