Hướng dẫn javascript file upload and download example - ví dụ tải lên và tải xuống tệp javascript

Tải lên tệp AJAX

Nhà phát triển có thể thực hiện tải lên tệp dựa trên AJAX lên máy chủ với JavaScript trong năm bước:

1. Một phần tử biểu mẫu đầu vào HTML5 phải được đưa vào trang web hiển thị trong trình duyệt của máy khách;
2. Một phương thức JavaScript phải được mã hóa để bắt đầu tải lên tệp dựa trên AJAX không đồng bộ;
3. Một thành phần phải tồn tại trên máy chủ để xử lý tải lên tệp và lưu tài nguyên cục bộ;
4. Máy chủ phải gửi phản hồi cho trình duyệt cho biết tải lên tệp JavaScript đã thành công; và
5. Trình duyệt của máy khách phải cung cấp phản hồi dựa trên AJAX cho biết tệp được tải lên thành công.

Trong ví dụ này, mục tiêu tải lên tệp JavaScript là một máy chủ web Apache. Do đó, thành phần phía máy chủ xử lý yêu cầu AJAX sẽ được viết bằng PHP. Nếu một máy chủ Tomcat hoặc Jetty là mục tiêu tải lên, nhà phát triển có thể mã hóa trình tải lên dựa trên Java ở phía máy chủ.

Thẻ tệp HTML5

HTML5 đã giới thiệu một loại trường biểu mẫu đầu vào mới có tên là tệp. Khi một trình duyệt gặp phải thẻ này, nó sẽ hiển thị một trình chọn tệp đầy đủ chức năng trên trang web. Khi nó kết hợp với thẻ nút HTML5 có thể kích hoạt phương thức JavaScript, hai phần tử này biểu thị các yếu tố đánh dấu cần thiết để bắt đầu quá trình tải lên tệp JavaScript và AJAX.

Các thẻ HTML5 sau đây cung cấp các thành phần cần thiết để thêm bộ chọn tệp và nút tải lên vào bất kỳ trang web nào:

id="fileupload" type="file" name="fileupload" />
id="upload-button" onclick="uploadFile()"> Upload 

Nút khởi động một phương thức có tên UploadFile (), chứa logic tải lên tệp javascript.

Logic tải lên tệp javascript

Thẻ tập lệnh trên không chứa gì ngoài JavaScript thuần túy. Ở đó, không có jquery hay võ đường nào được ném vào hỗn hợp và logic rất đơn giản:

• Tạo một đối tượng FormData để chứa thông tin sẽ được gửi đến máy chủ;
• Thêm tệp đã chọn để được tải lên đối tượng FormData;
• Không đồng bộ gọi tài nguyên phía máy chủ để xử lý việc tải lên; và
  • Tài nguyên phía máy chủ được gọi thông qua phương thức bài
  • Tài nguyên phía máy chủ được thông qua formdata chứa tệp
  • Trong ví dụ này, tài nguyên phía máy chủ được đặt tên
• Khi được thông báo rằng tải lên tệp JavaScript đã thành công, hãy gửi cảnh báo dựa trên AJAX cho máy khách.

Tất cả logic HTML và JavaScript sẽ được chứa trong một tệp có tên là Trình tải lên.html. HTML hoàn chỉnh trông như sau:

 
 
  
   
  
 
  
  id="fileupload" type="file" name="fileupload" /> 
  id="upload-button" onclick="uploadFile()"> Upload 

  
  

  

Xử lý tải lên tệp Apache

Yêu cầu các thành phần tải lên tệp JavaScript.

Khi tải lên tệp JavaScript không đồng bộ xảy ra, một thành phần phía máy chủ phải tồn tại để xử lý tệp đến và lưu trữ nó. Vì ví dụ này sử dụng máy chủ Apache HTTP (AHS) và vì là ngôn ngữ của AHS, nên nó yêu cầu một tệp có tên upload.php chứa tập lệnh PHP nhỏ để lưu tệp đến vào thư mục có tên tải lên:

/* Get the name of the uploaded file */
$filename = $_FILES['file']['name'];

/* Choose where to save the uploaded file */
$location = "upload/".$filename;

/* Save the uploaded file to the local filesystem */
if ( move_uploaded_file($_FILES['file']['tmp_name'], $location) ) { 
  echo 'Success'; 
} else { 
  echo 'Failure'; 
}

?>

Kịch bản PHP cũng đơn giản. Nó có được tên của tệp được tải lên và sau đó tạo một vị trí trong một thư mục có tên tải lên để lưu tệp. Phương thức PHP từ Move_upLoaded_File sau đó được sử dụng để lưu tệp đã tải lên vị trí mới này.

Chạy ví dụ tải lên tệp & nbsp; JavaScript

Các tệp được sử dụng trong ví dụ này, cùng với một thư mục có tên tải lên, phải được thêm vào thư mục HTDOCS của AHS. Khi máy khách truy cập tệp tải lên.html thông qua trình duyệt, máy khách sẽ có thể tải một tệp lên máy chủ bằng cách sử dụng JavaScript Ajax và Pure JavaScript.

Một trình tải lên tệp JavaScript thuần túy đơn giản hóa các tương tác dựa trên AJAX với máy chủ.