วิธีการสร้างอินสแตนซ์อ็อบเจ็กต์ไฟล์ใน JavaScript

มีFileวัตถุใน JavaScript ฉันต้องการสร้างอินสแตนซ์เพื่อวัตถุประสงค์ในการทดสอบ

ฉันได้ลองnew File()แล้ว แต่ได้รับข้อผิดพลาด "ตัวสร้างที่ผิดกฎหมาย"

เป็นไปได้ไหมที่จะสร้างFileวัตถุ?

การอ้างอิง File Object: https://developer.mozilla.org/en/DOM/File

ตามข้อกำหนด W3C File API ตัวสร้างไฟล์ต้องการพารามิเตอร์ 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เช่นคำตอบสำหรับคำถามนี้

ใช้ Blob แทน

นอกจากนี้ยังมีBlobที่คุณสามารถใช้แทนไฟล์ได้เนื่องจากเป็นสิ่งที่อินเทอร์เฟซของไฟล์ได้มาจากข้อมูลจำเพาะของ W3C :

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

อินเทอร์เฟซของไฟล์ขึ้นอยู่กับ Blob ซึ่งสืบทอดฟังก์ชันการทำงานของ Blob และขยายเพื่อรองรับไฟล์ในระบบของผู้ใช้

สร้าง Blob

การใช้BlobBuilderเช่นนี้กับวิธีการ JavaScript ที่มีอยู่ซึ่งใช้ไฟล์เพื่ออัปโหลดXMLHttpRequestและส่ง Blob ให้มันทำงานได้ดีเช่นนี้:

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",
});

แนวคิด ... ในการสร้าง File object (api) ใน javaScript สำหรับรูปภาพที่มีอยู่แล้วใน DOM:

<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 เพราะฉันต้องการจำลองการอัปโหลดไฟล์และมันใช้งานได้กับวัตถุไฟล์