FormData로 업로드 된 Blob에 파일 이름을 지정하는 방법은 무엇입니까?

FormData로 업로드 된 Blob에 파일 이름을 지정하는 방법은 무엇입니까?

---

현재 다음 코드를 사용하여 클립 보드에서 붙여 넣은 이미지를 업로드하고 있습니다.

// Turns out getAsFile will return a blob, not a file
var blob = event.clipboardData.items[0].getAsFile(), 
    form = new FormData(),
    request = new XMLHttpRequest();
form.append("blob",blob);
request.open(
            "POST",
            "/upload",
            true
        );
request.send(form);

다음과 유사한 이름을 수신하는 업로드 된 양식 필드가 나옵니다. Blob157fce71535b4f93ba92ac6053d81e3a

서버 측 통신을 수행하지 않고 이것을 설정 하거나이 파일 이름 클라이언트 측을 수신하는 방법이 있습니까?

---

Chrome 및 Firefox의 경우 다음을 사용하십시오.

form.append("blob",blob, filename);

( MDN 문서 참조 )

---

여기에없는 것 같으므로 여기에 추가합니다.

훌륭한 솔루션 외에도 form.append("blob",blob, filename);blob을 File인스턴스 로 바꿀 수 있습니다 .

var blob = new Blob([JSON.stringify([0,1,2])], {type : 'application/json'});
var fileOfBlob = new File([blob], 'aFileName.json');
form.append("upload", fileOfBlob);

---

데이터를 클립 보드에 붙여 넣기 때문에 파일의 출처와 속성 (이름 포함)을 알 수있는 신뢰할 수있는 방법이 없습니다.

가장 좋은 방법은 자신의 파일 명명 체계를 만들어서 blob과 함께 보내는 것입니다.

form.append("filename",getFileName());
form.append("blob",blob);

function getFileName() {
 // logic to generate file names
}

---

테스트하지는 않았지만 Blob 데이터 URL에 경고해야합니다.

var blob = event.clipboardData.items[0].getAsFile(), 
    form = new FormData(),
    request = new XMLHttpRequest();

var reader = new FileReader();
reader.onload = function(event) {
  alert(event.target.result); // <-- data url
};
reader.readAsDataURL(blob);

---

이 이름은 개체 URL GUID에서 파생 된 것 같습니다. 다음을 수행하여 이름이 파생 된 개체 URL을 가져옵니다.

var URL = self.URL || self.webkitURL || self;
var object_url = URL.createObjectURL(blob);
URL.revokeObjectURL(object_url);

object_urlblob:{origin}{GUID}Google Chrome 및 moz-filedata:{GUID}Firefox 에서 형식이 지정됩니다 . 출처는 프로토콜의 프로토콜 + 호스트 + 비표준 포트입니다. 예를 들어, blob:http://stackoverflow.com/e7bc644d-d174-4d5e-b85d-beeb89c17743또는 blob:http://[::1]:123/15111656-e46c-411d-a697-a09d23ec9a99. GUID를 추출하고 대시를 제거 할 수 있습니다.

---

실제로 다른 쪽의 서버가 구성되는 방법과 Blob 게시물을 처리하는 방법에 대한 모듈에 따라 다릅니다. 게시물 경로에 원하는 이름을 입력 할 수 있습니다.

request.open(
    "POST",
    "/upload/myname.bmp",
    true
);

---

Google App Engine을 사용하고 있습니까? 쿠키 (JavaScript로 만든)를 사용하여 파일 이름과 서버에서받은 이름 간의 관계를 유지할 수 있습니다.

---

When you are using Google Chrome you can use/abuse the Google Filesystem API for this. Here you can create a file with a specified name and write the content of a blob to it. Then you can return the result to the user.

I have not found a good way for Firefox yet; probably a small piece of Flash like downloadify is required to name a blob.

IE10 has a msSaveBlob() function in the BlobBuilder.

Maybe this is more for downloading a blob, but it is related.

참고URL : https://stackoverflow.com/questions/6664967/how-to-give-a-blob-uploaded-as-formdata-a-file-name