JavaScript에서 File 개체를 인스턴스화하는 방법은 무엇입니까?

JavaScript에서 File 개체를 인스턴스화하는 방법은 무엇입니까?

자바스크립트에 객체가 있습니다.테스트 목적으로 하나를 인스턴스화하고 싶습니다.

난 시도했다.new File()하지만 "불법 생성자" 오류가 발생합니다.

다음을 생성할 수 있습니까?File목적어?

---

파일 개체 참조: https://developer.mozilla.org/en/DOM/File

W3C File API 사양에 따르면 File 생성자에는 2개(또는 3개)의 매개 변수가 필요합니다.

빈 파일을 만들려면 다음을 수행합니다.

var f = new File([""], "filename");

• 첫 번째 인수는 텍스트 라인 배열로 제공되는 데이터입니다.
• 두 번째 인수는 파일 이름입니다.

• 세 번째 인수는 다음과 같습니다.

  var f = new File([""], "filename.txt", {type: "text/plain", lastModified: date})
  

FireFox, Chrome 및 Opera에서는 작동하지만 Safari 또는 IE/Edge에서는 작동하지 않습니다.

이제 할 수 있어요!

var parts = [
  new Blob(['you construct a file...'], {type: 'text/plain'}),
  ' Same way as you do with blob',
  new Uint16Array([33])
];

// Construct a file
var file = new File(parts, 'sample.txt', {
    lastModified: new Date(0), // optional - default = now
    type: "overide/mimetype" // optional - default = ''
});

var fr = new FileReader();

fr.onload = function(evt){
   document.body.innerHTML = evt.target.result + "<br><a href="+URL.createObjectURL(file)+" download=" + file.name + ">Download " + file.name + "</a><br>type: "+file.type+"<br>last modified: "+ file.lastModifiedDate
}

fr.readAsText(file);

갱신하다

BlobBuilder는 더 이상 사용되지 않습니다. 테스트 목적으로 사용하는 경우 사용 방법을 확인하십시오.

그렇지 않으면 이 질문에 대한 답과 같이 Blob으로 이동하는 마이그레이션 전략에 아래를 적용합니다.

대신 블럽 사용

또는 파일 인터페이스가 W3C 사양에 따라 파생된 것이므로 파일 대신 사용할 수 있는 Blob이 있습니다.

interface File : Blob {
    readonly attribute DOMString name;
    readonly attribute Date lastModifiedDate;
};

파일 인터페이스는 Blob을 기반으로 하며, Blob 기능을 상속하고 사용자 시스템의 파일을 지원하도록 확장합니다.

블럽 만들기

파일을 업로드하는 기존 JavaScript 메서드에서 BlobBuilder를 이와 같이 사용합니다.XMLHttpRequest블롭을 공급하면 다음과 같이 작동합니다.

var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder;
var bb = new BlobBuilder();

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://jsfiddle.net/img/logo.png', true);

xhr.responseType = 'arraybuffer';

bb.append(this.response); // Note: not xhr.responseText

//at this point you have the equivalent of: new File()
var blob = bb.getBlob('image/png');

/* more setup code */
xhr.send(blob);

확장 예제

나머지 샘플은 더 완벽한 방식으로 jsFiddle에 업로드되어 있지만 업로드 로직을 장기적으로 노출할 수 없기 때문에 성공적으로 업로드되지 않습니다.

이제 모든 주요 브라우저에서 가능하고 지원됩니다. https://developer.mozilla.org/en-US/docs/Web/API/File/File

var file = new File(["foo"], "foo.txt", {
  type: "text/plain",
});

그 생각은...DOM에 이미 있는 이미지에 대해 JavaScript에서 File 개체(api)를 만드는 방법:

<img src="../img/Products/fijRKjhudDjiokDhg1524164151.jpg">

var file = new File(['fijRKjhudDjiokDhg1524164151'],
                     '../img/Products/fijRKjhudDjiokDhg1524164151.jpg', 
                     {type:'image/jpg'});

// created object file
console.log(file);

그러지 마! ... (하지만 어쨌든 내가 해냈어요)

-> 콘솔은 객체 파일과 유사한 결과를 제공합니다.

File(0) {name: "fijRKjokDhgfsKtG1527053050.jpg", lastModified: 1527053530715, lastModifiedDate: Wed May 23 2018 07:32:10 GMT+0200 (Paris, Madrid (heure d’été)), webkitRelativePath: "", size: 0, …}
lastModified:1527053530715
lastModifiedDate:Wed May 23 2018 07:32:10 GMT+0200 (Paris, Madrid (heure d’été)) {}
name:"fijRKjokDhgfsKtG1527053050.jpg"
size:0
type:"image/jpg"
webkitRelativePath:""__proto__:File

하지만 물체의 크기가 틀렸습니다...

왜 그래야 하죠?

예를 들어 제품 업데이트 중에 이미 업로드된 이미지 양식을 업데이트 중에 추가된 추가 이미지와 함께 재전송하는 경우

자바스크립트와 동적이기 때문에 파일 인터페이스와 일치하는 클래스를 정의하고 대신 사용할 수 있습니다.

파일 업로드를 시뮬레이션하고 파일 개체에서 작동하기 때문에 dropzone.js로 이 작업을 수행해야 했습니다.

언급URL : https://stackoverflow.com/questions/8390855/how-to-instantiate-a-file-object-in-javascript