Bài viết này sẽ trình bày phương pháp tải lên hình ảnh bằng JavaScript và HTML.
Làm cách nào để tải lên một hình ảnh đơn giản bằng JavaScript/HTML?
Để tải lên một hình ảnh đơn giản bằng JavaScript, trước tiên, chúng tôi sẽ thêm thẻ hình ảnh vào trang HTML, sau đó sử dụng mã JavaScript để tải và chọn hình ảnh vào trang web.
Đối với ý nghĩa thực tế, hãy thử các hướng dẫn đã nêu.
Ví dụ
Trước hết, hãy làm theo các hướng dẫn đã cho:
- Chèn “ <đầu vào> ” phần tử và chỉ định loại đầu vào là “ tài liệu ”.
- Loại “tệp” này xác định trường trong phần chọn tệp và một “ duyệt ” nút để tải lên các tập tin.
- “
” thẻ chèn dấu ngắt dòng. - Sau đó, chèn một “
” thẻ HTML và thêm “ nhận dạng ” để chỉ định id duy nhất với một tên cụ thể.
- “ src ” thuộc tính được sử dụng để thêm URL của tệp phương tiện:
< anh >
< id img = 'hình ảnh của tôi' src = '#' >
Có thể nhận thấy rằng một tùy chọn tệp đã được tạo và nó chỉ có thể hiển thị tên hình ảnh sau khi chấp nhận đầu vào:
Bây giờ, bên trong “
< kịch bản >
cửa sổ. addEventListener ( 'trọng tải' , chức năng ( ) {
tài liệu. bộ chọn truy vấn ( 'đầu vào [loại = 'tệp']' ) . addEventListener ( 'thay đổi' , chức năng ( ) {
nếu như ( cái này . các tập tin && cái này . các tập tin [ 0 ] ) {
biến đổi = tài liệu. getElementById ( 'img_content' ) ;
img. đang tải = ( ) => {
URL . thu hồiObjectURL ( img. src ) ;
}
img. src = URL . tạoObjectURL ( cái này . các tập tin [ 0 ] ) ;
}
} ) ;
} ) ;
kịch bản >
Trong đoạn mã trên:
- “ addEventListener() ” Phương thức JavaScript cho phép chèn hoặc đính kèm một trình xử lý sự kiện đã xác định vào một phần tử.
- “ truy vấnSelector() ” là một phương thức được sử dụng để trả về mục đầu tiên trong tài liệu cụ thể liên kết với bộ chọn cụ thể.
- “ getElementById() ” được sử dụng để lấy phần tử bằng cách sử dụng id đã xác định. Với mục đích đó, giá trị của được truyền dưới dạng tham số.
- “ thu hồiObjectURL() ” phát hành một URL đối tượng hiện có được tạo bằng cách sử dụng URL. Để làm như vậy, URL của hình ảnh được truyền dưới dạng tham số của phương thức này.
- “ tạoObjectURL() ” là một phương thức tĩnh của JavaScript làm cho một chuỗi cụ thể có một URL đại diện cho đối tượng được truyền trong tham số.
đầu ra
Có thể nhận thấy rằng chúng tôi đã tải lên thành công một hình ảnh đơn giản.
Phần kết luận
Để tải lên hình ảnh đơn giản bằng JavaScript, hãy sử dụng “ addEventListener() ” phương thức cho phép chèn hoặc đính kèm trình xử lý sự kiện đã xác định vào một phần tử. Sau đó, truy cập phần tử được xác định theo id và sử dụng “ thu hồiObjectURL() ' Và ' tạoObjectURL() ” phương pháp. Bài đăng này đã nêu phương pháp tải lên hình ảnh đơn giản bằng JavaScript/HTML.