Hướng dẫn javascript save file on server-side - javascript lưu tệp ở phía máy chủ

Chào mừng bạn đến với một hướng dẫn về cách tạo và lưu các tệp trong JavaScript. Vâng, đây sẽ là một quá trình phức tạp cho người mới bắt đầu. Để giữ cho mọi thứ đơn giản-lưu các tệp trên các nodej phía máy chủ là một cách dễ dàng, nhưng thật khó để lưu trực tiếp các tệp ở phía máy khách vì các hạn chế bảo mật. Điều đó nói rằng, có nhiều phương pháp chúng ta có thể sử dụng.

Các cách có thể để tạo và lưu các tệp trong JavaScript là:

1. Sử dụng thư viện có tên FileSaver -

   if(!empty($_POST['data'])){
   $data = $_POST['data'];
   $fname = mktime() . ".txt";//generates random name
   
   $file = fopen("upload/" .$fname, 'w');//creates new file
   fwrite($file, $data);
   fclose($file);
   }
   

   4
2. Tạo một đối tượng Blob và cung cấp một tiết kiệm của người Viking.

   • if(!empty($_POST['data'])){
     $data = $_POST['data'];
     $fname = mktime() . ".txt";//generates random name
     
     $file = fopen("upload/" .$fname, 'w');//creates new file
     fwrite($file, $data);
     fclose($file);
     }
     

     5

   • if(!empty($_POST['data'])){
     $data = $_POST['data'];
     $fname = mktime() . ".txt";//generates random name
     
     $file = fopen("upload/" .$fname, 'w');//creates new file
     fwrite($file, $data);
     fclose($file);
     }
     

     6

   • if(!empty($_POST['data'])){
     $data = $_POST['data'];
     $fname = mktime() . ".txt";//generates random name
     
     $file = fopen("upload/" .$fname, 'w');//creates new file
     fwrite($file, $data);
     fclose($file);
     }
     

     7

   • if(!empty($_POST['data'])){
     $data = $_POST['data'];
     $fname = mktime() . ".txt";//generates random name
     
     $file = fopen("upload/" .$fname, 'w');//creates new file
     fwrite($file, $data);
     fclose($file);
     }
     

     8
3. Tải dữ liệu, lưu nó trên máy chủ.

   • if(!empty($_POST['data'])){
     $data = $_POST['data'];
     $fname = mktime() . ".txt";//generates random name
     
     $file = fopen("upload/" .$fname, 'w');//creates new file
     fwrite($file, $data);
     fclose($file);
     }
     

     9

   • var xhr = new XMLHttpRequest();
     

     0

   • var xhr = new XMLHttpRequest();
     

     1
4. Tạo một luồng tệp có thể ghi.

   • var xhr = new XMLHttpRequest();
     

     2

   • var xhr = new XMLHttpRequest();
     

     3

   • var xhr = new XMLHttpRequest();
     

     4

   • var xhr = new XMLHttpRequest();
     

     5
5. Trong NodeJS, chỉ cần sử dụng mô -đun hệ thống tệp -

   var xhr = new XMLHttpRequest();
   

   6

Điều đó bao gồm những điều cơ bản, nhưng chúng ta hãy đi qua các ví dụ chi tiết trong hướng dẫn này - đọc tiếp!

Tôi đã bao gồm một tệp zip với tất cả các mã nguồn ví dụ khi bắt đầu hướng dẫn này, vì vậy bạn không phải sao chép mọi thứ, hoặc nếu bạn chỉ muốn đi thẳng vào.

Slide nhanh

MỤC LỤC

Tải xuống & ghi chú

Thứ nhất, đây là liên kết tải xuống đến mã ví dụ như đã hứa.

Ghi chú nhanh

Nếu bạn phát hiện ra một lỗi, hãy bình luận bên dưới. Tôi cũng cố gắng trả lời các câu hỏi ngắn, nhưng đó là một người so với toàn bộ thế giới, nếu bạn cần câu trả lời khẩn cấp, vui lòng kiểm tra danh sách các trang web của tôi để nhận trợ giúp lập trình.

Mã hóa ví dụ Tải xuống

Nhấn vào đây để tải xuống & nbsp; mã nguồn, tôi đã phát hành nó theo giấy phép MIT, vì vậy hãy thoải mái xây dựng trên đó hoặc sử dụng nó trong dự án của riêng bạn.

Được rồi, bây giờ chúng ta hãy đi vào các cách khác nhau để lưu các tệp trong JavaScript.

Phương pháp 1) Sử dụng trình bảo vệ tệp

1-filesaver.js

Cảm ơn trời, một người đã làm tất cả những công việc khó khăn. Đây là một trong những cách trình duyệt chéo dễ nhất và an toàn nhất của người Viking để lưu tệp-

1. Đơn giản chỉ cần tải & nbsp; ____ ____ 27 từ CDN.
2. Tạo đối tượng ________ 28 & nbsp; và bật nó vào & nbsp; ________ 29.

Phương pháp 2) Tạo tệp từ Blob & Force Tải xuống

2-blob-download.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);

Do các hạn chế bảo mật, JavaScript phía máy khách không thể truy cập trực tiếp hệ thống tệp. Đó là, không có văn bản trực tiếp và tải các tệp trên máy tính của người dùng. Nhưng đây là cách làm vòng xoay - tạo một đối tượng Blob (nhị phân) để chứa tất cả dữ liệu, sau đó đặt liên kết tải xuống cho nó.

Phương pháp 3) Tải Blob lên máy chủ

JavaScript

3a-blob-upload.html

PHP

3b-blob-upload.php

Đây là một giải pháp thay thế cho việc tải xuống blob ở trên - chúng tôi tải lên blob và lưu nó trên máy chủ thay thế.

Phương pháp 4) luồng tệp có thể ghi

4-file-stream.html

Vâng, người bà già tuổi của Internet đã kết thúc. Chúng tôi có thể tạo một trình xử lý tệp và luồng tệp trên máy tính của người dùng, sử dụng nó để lưu tệp. Nhưng điều này vẫn mở một hộp thoại lưu của người Viking dưới dạng hộp thoại, chúng tôi không thể trực tiếp lưu mà không có sự cho phép của người dùng.

P.S. Điều này sẽ chỉ hoạt động trên Chrome, Edge và Opera tại thời điểm viết.

Phương pháp 5) Viết vào tệp trong nodejs

5-node.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);
});
*/

Vâng, nó thật đơn giản. Chỉ cần tải mô -đun hệ thống tệp & nbsp; ____ 30 và sử dụng chức năng & nbsp; ____ 31 & nbsp; Để tải các tệp, chúng tôi sử dụng chức năng & nbsp; ________ 32 & nbsp;

Kiểm tra khả năng tương thích

• Blob - Caniuse
• Tạo luồng tệp có thể ghi - Caniuse
• Hiển thị lưu trình chọn tệp - Caniuse
• Hàm mũi tên - Caniuse

Không phải tất cả các trình duyệt đều hỗ trợ kiểu dữ liệu Blob cũng như tất cả các tính năng ghi tệp. Vì vậy, tốt nhất là thực hiện một số kiểm tra trước khi bạn bật các tính năng ninja của mình - Tôi sẽ khuyên bạn nên sử dụng Modernizr để phát hiện xem trình duyệt có hỗ trợ một số tính năng nhất định không.

Liên kết & Tài liệu tham khảo

• JavaScript Blob & NBSP; - MDN
• Các loại MIME & nbsp; - sitePoint
• Tạo URL đối tượng & nbsp; và & nbsp; thu hồi url đối tượng & nbsp; - mdn
• Hình thức dữ liệu & nbsp; & nbsp; - mdn
• Lấy API & NBSP; - MDN
• Viết các tệp trong NodeJS - Code Boxx

Video hướng dẫn

Bảng gian lận infographic