Bagaimana cara menyimpan file javascript yang diunggah?

Question

Selamat datang di tutorial cara membuat dan menyimpan file di Javascript. Nah, ini akan menjadi proses yang rumit untuk pemula. Sederhananya – Menyimpan file di sisi server NodeJS sangat mudah, tetapi sulit untuk langsung menyimpan file di sisi klien karena batasan keamanan. Yang mengatakan, ada banyak metode yang bisa kita gunakan

Table of Contents Show

SLIDE CEPAT
UNDUH & CATATAN
CATATAN CEPAT
DOWNLOAD KODE CONTOH
SIMPAN FILE DI JAVASCRIPT
METODE 1) GUNAKAN FILE SAVER
METODE 2) BUAT FILE DARI BLOB & FORCE DOWNLOAD
METODE 3) UPLOAD BLOB KE SERVER
METODE 4) STREAM FILE YANG DAPAT DITULIS
METODE 5) MENULIS KE FILE DI NODEJS
BIT & LINK YANG BERMANFAAT
PEMERIKSAAN KOMPATIBILITAS
LINK dan REFERENSI
VIDEO TUTORIAL
LEMBAR CHEAT INFOGRAFIS
Bagaimana cara menyimpan file yang diunggah dalam JavaScript?
Bagaimana cara mengunduh file dengan JavaScript?
Bagaimana cara memindahkan file yang diunggah ke folder dalam JavaScript?
Bagaimana cara membuat dan menyimpan file teks dalam JavaScript?

Cara yang mungkin untuk membuat dan menyimpan file dalam Javascript adalah

Gunakan perpustakaan bernama FileSaver – saveAs(new File(["CONTENT"], "demo.txt", {type: "text/plain;charset=utf-8"}));

Buat objek blob dan tawarkan "simpan sebagai"

var a = document.createElement("a");
a.href = window.URL.createObjectURL(new Blob(["CONTENT"], {type: "text/plain"}));
a.download = "demo.txt";

// (A) CREATE BLOB OBJECT
var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

// (B) CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.href = url;
anchor.download = "demo.txt";
    
// (C) "FORCE DOWNLOAD"
// NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY
// BETTER TO LET USERS CLICK ON THEIR OWN
anchor.click();
window.URL.revokeObjectURL(url);
document.removeChild(anchor);

0

Unggah data, simpan di server

// (A) CREATE BLOB OBJECT
var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

// (B) CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.href = url;
anchor.download = "demo.txt";
    
// (C) "FORCE DOWNLOAD"
// NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY
// BETTER TO LET USERS CLICK ON THEIR OWN
anchor.click();
window.URL.revokeObjectURL(url);
document.removeChild(anchor);

_1

// (A) CREATE BLOB OBJECT
var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

// (B) CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.href = url;
anchor.download = "demo.txt";
    
// (C) "FORCE DOWNLOAD"
// NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY
// BETTER TO LET USERS CLICK ON THEIR OWN
anchor.click();
window.URL.revokeObjectURL(url);
document.removeChild(anchor);

_2

// (A) CREATE BLOB OBJECT
var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

// (B) CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.href = url;
anchor.download = "demo.txt";
    
// (C) "FORCE DOWNLOAD"
// NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY
// BETTER TO LET USERS CLICK ON THEIR OWN
anchor.click();
window.URL.revokeObjectURL(url);
document.removeChild(anchor);

_3

Buat aliran file yang dapat ditulisi

// (A) CREATE BLOB OBJECT
var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

// (B) CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.href = url;
anchor.download = "demo.txt";
    
// (C) "FORCE DOWNLOAD"
// NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY
// BETTER TO LET USERS CLICK ON THEIR OWN
anchor.click();
window.URL.revokeObjectURL(url);
document.removeChild(anchor);

_4

// (A) CREATE BLOB OBJECT
var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

// (B) CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.href = url;
anchor.download = "demo.txt";
    
// (C) "FORCE DOWNLOAD"
// NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY
// BETTER TO LET USERS CLICK ON THEIR OWN
anchor.click();
window.URL.revokeObjectURL(url);
document.removeChild(anchor);

5

// (A) CREATE BLOB OBJECT
var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

// (B) CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.href = url;
anchor.download = "demo.txt";
    
// (C) "FORCE DOWNLOAD"
// NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY
// BETTER TO LET USERS CLICK ON THEIR OWN
anchor.click();
window.URL.revokeObjectURL(url);
document.removeChild(anchor);

_6

// (A) CREATE BLOB OBJECT
var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

// (B) CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.href = url;
anchor.download = "demo.txt";
    
// (C) "FORCE DOWNLOAD"
// NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY
// BETTER TO LET USERS CLICK ON THEIR OWN
anchor.click();
window.URL.revokeObjectURL(url);
document.removeChild(anchor);

_7

Di NodeJS, cukup gunakan modul sistem file –

// (A) CREATE BLOB OBJECT
var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

// (B) CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.href = url;
anchor.download = "demo.txt";
    
// (C) "FORCE DOWNLOAD"
// NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY
// BETTER TO LET USERS CLICK ON THEIR OWN
anchor.click();
window.URL.revokeObjectURL(url);
document.removeChild(anchor);

8

Itu mencakup dasar-dasarnya, tetapi mari kita telusuri contoh terperinci dalam tutorial ini – Baca terus

ⓘ Saya telah menyertakan file zip dengan semua kode sumber contoh di awal tutorial ini, jadi Anda tidak perlu menyalin-tempel semuanya… Atau jika Anda hanya ingin langsung masuk

SLIDE CEPAT

Unduh & Catatan

UNDUH & CATATAN

Pertama, berikut adalah tautan unduhan ke kode contoh seperti yang dijanjikan

CATATAN CEPAT

Jika Anda menemukan bug, jangan ragu untuk berkomentar di bawah ini. Saya mencoba menjawab pertanyaan singkat juga, tetapi itu adalah satu orang versus seluruh dunia… Jika Anda sangat membutuhkan jawaban, silakan periksa daftar situs web saya untuk mendapatkan bantuan dalam pemrograman

DOWNLOAD KODE CONTOH

Klik di sini untuk mengunduh kode sumber, saya telah merilisnya di bawah lisensi MIT, jadi silakan buat di atasnya atau gunakan dalam proyek Anda sendiri

SIMPAN FILE DI JAVASCRIPT

Baiklah, sekarang mari kita masuk ke berbagai cara untuk menyimpan file di Javascript

METODE 1) GUNAKAN FILE SAVER

1-filesaver. js

<!-- (A) LOAD FILE SAVER -->
<!-- https://cdnjs.com/libraries/FileSaver.js -->
<!-- https://github.com/eligrey/FileSaver.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
 
<script>
// (B) "SAVE AS"
var myFile = new File(["CONTENT"], "demo.txt", {type: "text/plain;charset=utf-8"});
saveAs(myFile);
</script>

_

Syukurlah, seseorang melakukan semua kerja keras. Ini adalah salah satu cara lintas-browser yang paling mudah dan “aman” untuk menyimpan file –

Cukup muat

// (A) CREATE BLOB OBJECT
var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

// (B) CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.href = url;
anchor.download = "demo.txt";
    
// (C) "FORCE DOWNLOAD"
// NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY
// BETTER TO LET USERS CLICK ON THEIR OWN
anchor.click();
window.URL.revokeObjectURL(url);
document.removeChild(anchor);

_9 dari CDN

Buat objek

<script>
function blobajax () {
  // (A) CREATE BLOB OBJECT
  var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

  // (B) FORM DATA
  var data = new FormData();
  data.append("upfile", myBlob);

  // (C) AJAX UPLOAD TO SERVER
  fetch("3b-upload.php", {
    method: "POST",
    body: data
  })
  .then((res) => { return res.text(); })
  .then((txt) => { console.log(txt); });
}
</script>
<input type="button" value="Go" onclick="blobajax()"/>

0 dan masukkan ke dalam

<script>
function blobajax () {
  // (A) CREATE BLOB OBJECT
  var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

  // (B) FORM DATA
  var data = new FormData();
  data.append("upfile", myBlob);

  // (C) AJAX UPLOAD TO SERVER
  fetch("3b-upload.php", {
    method: "POST",
    body: data
  })
  .then((res) => { return res.text(); })
  .then((txt) => { console.log(txt); });
}
</script>
<input type="button" value="Go" onclick="blobajax()"/>

1

METODE 2) BUAT FILE DARI BLOB & FORCE DOWNLOAD

2-gumpalan-unduh. html

// (A) CREATE BLOB OBJECT
var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

// (B) CREATE DOWNLOAD LINK
var url = window.URL.createObjectURL(myBlob);
var anchor = document.createElement("a");
anchor.href = url;
anchor.download = "demo.txt";
    
// (C) "FORCE DOWNLOAD"
// NOTE: MAY NOT ALWAYS WORK DUE TO BROWSER SECURITY
// BETTER TO LET USERS CLICK ON THEIR OWN
anchor.click();
window.URL.revokeObjectURL(url);
document.removeChild(anchor);

Karena pembatasan keamanan, Javascript sisi klien tidak dapat langsung mengakses sistem file. Artinya, tidak ada penulisan dan pemuatan file secara langsung di komputer pengguna. Tapi ini adalah cara memutar untuk melakukan sesuatu - Buat objek BLOB (biner) untuk menampung semua data, lalu atur tautan unduhan ke sana

METODE 3) UPLOAD BLOB KE SERVER

JAVASCRIPT

3a-gumpalan-unggah. html

<script>
function blobajax () {
  // (A) CREATE BLOB OBJECT
  var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

  // (B) FORM DATA
  var data = new FormData();
  data.append("upfile", myBlob);

  // (C) AJAX UPLOAD TO SERVER
  fetch("3b-upload.php", {
    method: "POST",
    body: data
  })
  .then((res) => { return res.text(); })
  .then((txt) => { console.log(txt); });
}
</script>
<input type="button" value="Go" onclick="blobajax()"/>

PHP

3b-gumpalan-unggah. php

<?php
echo move_uploaded_file(
  $_FILES["upfile"]["tmp_name"], 
  "demo.txt"
) ? "OK" : "ERROR UPLOADING";

Ini adalah alternatif untuk unduhan BLOB di atas – Kami mengunggah BLOB dan menyimpannya di server

METODE 4) STREAM FILE YANG DAPAT DITULIS

4-file-aliran. html

<script>
async function saveFile() {
  // (A) CREATE BLOB OBJECT
  var myBlob = new Blob(["CONTENT"], {type: "text/plain"});
 
  // (B) FILE HANDLER & FILE STREAM
  const fileHandle = await window.showSaveFilePicker({
    types: [{
      description: "Text file",
      accept: {"text/plain": [".txt"]}
    }]
  });
  const fileStream = await fileHandle.createWritable();
 
  // (C) WRITE FILE
  await fileStream.write(myBlob);
  await fileStream.close();
}
</script>

<input type="button" value="Save File" onclick="saveFile()"/>

Ya, usia internet nenek tua sudah berakhir. Kita dapat membuat penangan file dan aliran file di komputer pengguna, menggunakannya untuk menyimpan file. Tapi ini masih membuka kotak dialog "save file as", kita tidak bisa langsung menyimpan tanpa izin pengguna

P. S. Ini hanya akan berfungsi di Chrome, Edge, dan Opera pada saat penulisan

METODE 5) MENULIS KE FILE DI NODEJS

5-simpul. js

// (A) LOAD FILE SYSTEM MODULE
// https://nodejs.org/api/fs.html
const fs = require("fs");

// (B) WRITE TO FILE
fs.writeFile("demo.txt", "CONTENT", "utf8", (error, data) => {
  console.log("Write complete");
  console.log(error);
  console.log(data);
});

/* (C) READ FROM FILE
fs.readFile("demo.txt", "utf8", (error, data) => {
  console.log("Read complete");
  console.log(error);
  console.log(data);
});
*/

Ya, sesederhana itu. Cukup muat modul sistem file

<script>
function blobajax () {
  // (A) CREATE BLOB OBJECT
  var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

  // (B) FORM DATA
  var data = new FormData();
  data.append("upfile", myBlob);

  // (C) AJAX UPLOAD TO SERVER
  fetch("3b-upload.php", {
    method: "POST",
    body: data
  })
  .then((res) => { return res.text(); })
  .then((txt) => { console.log(txt); });
}
</script>
<input type="button" value="Go" onclick="blobajax()"/>

2, dan gunakan fungsi

<script>
function blobajax () {
  // (A) CREATE BLOB OBJECT
  var myBlob = new Blob(["CONTENT"], {type: "text/plain"});

  // (B) FORM DATA
  var data = new FormData();
  data.append("upfile", myBlob);

  // (C) AJAX UPLOAD TO SERVER
  fetch("3b-upload.php", {
    method: "POST",
    body: data
  })
  .then((res) => { return res.text(); })
  .then((txt) => { console.log(txt); });
}
</script>
<input type="button" value="Go" onclick="blobajax()"/>

3 . Untuk memuat file, kami menggunakan fungsi ________11______4 yang sesuai

BIT & LINK YANG BERMANFAAT

Itu saja untuk tutorial ini, dan ini adalah bagian kecil tentang beberapa tambahan dan tautan yang mungkin berguna bagi Anda

PEMERIKSAAN KOMPATIBILITAS

Gumpalan – Dapat Saya Gunakan
Buat Aliran File yang Dapat Ditulis – CanIUse
Tampilkan Save File Picker – CanIUse
Fungsi Panah – CanIUse

Tidak semua browser mendukung tipe data BLOB atau semua fitur penulisan file. Jadi yang terbaik adalah melakukan beberapa pemeriksaan sebelum Anda mengaktifkan fitur ninja Anda – Saya akan merekomendasikan menggunakan Modernizr untuk mendeteksi jika browser mendukung fitur tertentu

LINK dan REFERENSI

Gumpalan Javascript – MDN
Jenis MIME – SitePoint
Buat URL Objek dan Cabut URL Objek – MDN
Formulir Data – MDN
Ambil API – MDN
Tulis File Di NodeJS – Code Boxx

VIDEO TUTORIAL

LEMBAR CHEAT INFOGRAFIS

Terima kasih telah membaca, dan kami telah sampai di akhir panduan ini. Saya harap ini membantu Anda dengan proyek Anda, dan jika Anda ingin berbagi apa pun dengan panduan ini, jangan ragu untuk berkomentar di bawah ini. Semoga berhasil dan selamat membuat kode