2
Mới! Lưu câu hỏi hoặc câu trả lời và sắp xếp nội dung yêu thích của bạn. Tìm hiểu thêm.
Learn more.
Tôi có loại đầu vào HTML cổ điển cho tệp
Và tôi muốn người dùng có một tùy chọn để tải lại tệp anh ta vừa tải lên.
Tôi đã cố gắng làm điều đó với JavaScript để tải xuống thông qua FilePath, nhưng Chrome dường như có một số tính năng bảo mật thay thế đường dẫn thực bằng "FakePath"
C: \ FakePath \ xxx.pdf
Bất kỳ ý tưởng làm thế nào để tải xuống tệp đã tải lên [chỉ là phía máy khách, chưa gửi biểu mẫu]?
Đã hỏi ngày 16 tháng 9 năm 2019 lúc 8:52Sep 16, 2019 at 8:52
1
Bạn có thể sử dụng url.CreateObjectUrl [] để tạo một liên kết cho phép người dùng tải xuống tệp.
const input = document.getElementById['upload'];
const link = document.getElementById['link'];
let objectURL;
input.addEventListener['change', function [] {
if [objectURL] {
// revoke the old object url to avoid using more memory than needed
URL.revokeObjectURL[objectURL];
}
const file = this.files[0];
objectURL = URL.createObjectURL[file];
link.download = file.name; // this name is used when the user downloads the file
link.href = objectURL;
}];
link to your file [upload a file first]
Lưu ý trên đoạn trích: Trình duyệt có thể chặn thực hiện nhiều lượt tải xuống theo cách này.
Đã trả lời ngày 16 tháng 9 năm 2019 lúc 13:04Sep 16, 2019 at 13:04
TimotimoTimo
Phim huy hiệu bạc 21311 silver badge11 bronze badges
Đây là cùng một đoạn trích từ phía trên, với 2 cải tiến:
- Liên kết tải xuống không hiển thị
- Tải xuống sẽ tự động bắt đầu [nếu không bị chặn bởi trình duyệt]
Tên tệp vẫn chưa được thực hiện
const input = document.getElementById['upload'];
const link = document.getElementById['link'];
let objectURL;
input.addEventListener['change', function [] {
if [objectURL] {
// revoke the old object url to avoid using more memory than needed
URL.revokeObjectURL[objectURL];
}
const file = this.files[0];
objectURL = URL.createObjectURL[file];
link.href = objectURL;
link.click[];
}];
shouldnt be visible
Đã trả lời ngày 16 tháng 9 năm 2019 lúc 13:14Sep 16, 2019 at 13:14
Lưu ý, bài viết này liên quan đến JavaScript phía khách hàng. Để biết ví dụ tải lên JavaScript phía máy khách và máy chủ, hãy xem tệp này tải lên với Node và JavaScript hướng dẫn.
Nó từng là một thách thức khó khăn cho nhà phát triển để tải lên các tệp thông qua trình duyệt. Các cơ sở phía máy khách kém cản trở phương trình và các thành phần phía máy chủ cần tồn tại để xử lý luồng dữ liệu đến.
May mắn thay, thẻ đầu vào tệp HTML5 đã đơn giản hóa những thứ ở phía máy khách. Tuy nhiên, các nhà phát triển đã thêm sự phức tạp không cần thiết vào ứng dụng của họ khi tạo ra các tải lên tệp AJAX và JavaScript. Khi các nhà phát triển chuyển sang các thư viện phổ biến như JQuery hoặc DOJO Toolkit, họ thêm các vấn đề không cần thiết để tải lên tệp. Rất may, có một cách dễ dàng hơn.
Tôi kết hợp một loạt các hướng dẫn tải lên tệp. Chọn công nghệ của bạn và tải lên!
Tải tập tin lên máy chủ không cần phải là vấn đề. |
Cách dễ nhất và đơn giản nhất để nhà phát triển hoàn thành tải lên tệp AJAX là sử dụng JavaScript thuần túy và để lại các thư viện và khung cồng kềnh phía sau.
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:
- 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;
- 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ộ;
- 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ộ;
- 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à
- 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:
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.
async function uploadFile[] { let formData = new FormData[]; formData.append["file", fileupload.files[0]]; await fetch['/upload.php', { method: "POST", body: formData }]; alert['The file has been uploaded successfully.']; }
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:
Ajax JavaScript File Upload Example Upload async function uploadFile[] { let formData = new FormData[]; formData.append["file", fileupload.files[0]]; await fetch['/upload.php', { method: "POST", body: formData }]; alert['The file has been uploaded successfully.']; }
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:
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ủ.