입력 파일 개체를 JSON에 직렬화하려면 어떻게 해야 합니까?

입력 파일 개체를 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으로 전송합니다.

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

또한 동작에 대한 추가도 가능합니다.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를 사용하여 파일 내용을 읽어야 합니다.파일 개체에는 파일 내용이 포함되어 있지 않습니다(나중에 파일을 읽을 수 있도록 파일을 가리키는 포인터일 뿐입니다).

이 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

json 문자열을 전달하면 Javascript는 내부적으로 Json 객체에 trnsform하므로 해석할 필요가 없습니다.

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

이 폴더 파일을 열고 노드 json.js를 실행합니다.

언급URL : https://stackoverflow.com/questions/24139216/how-can-i-serialize-an-input-file-object-to-json