Hình ảnh tải lên HTML

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn giải pháp tải lên hình ảnh trong HTML và hiển thị, như chúng tôi biết bằng cách sử dụng thẻ đầu vào với loại 'tệp', chúng tôi có thể tải lên hình ảnh, để hiển thị hình ảnh đó, chúng tôi đã sử dụng javascript

Javascript được các lập trình viên trên khắp thế giới sử dụng để tạo nội dung web động và tương tác như ứng dụng và trình duyệt và nó là ngôn ngữ lập trình phía máy khách

Hãy xem cách sử dụng javascript để hiển thị hình ảnh với hướng dẫn từng bước

Hướng dẫn từng bước về tải lên hình ảnh trong HTML và hiển thị. -

In tag has onchange event which is used for making the change in the state and transforming the value once the event is triggered.

Với sự trợ giúp của sự kiện này, chúng tôi chuyển giá trị của hình ảnh đã tải lên sang phương thức createObjectURL[] trong javascript

Đó là một phương thức tĩnh tạo một chuỗi chứa URL đại diện cho đối tượng được cung cấp trong tham số

So it can create URL of image by the value and sets to tag it will display the uploaded image on webpage.

Hãy xem làm thế nào để thực hiện điều này

  
    imgae upload and display
  
  
      
      

      
          var loadFile = function[event] {
              var image = document.getElementById['output'];
              image.src=URL.createObjectURL[event.target.files[0]];
          };
      
  

1. thẻ hướng dẫn trình duyệt web biết phiên bản nào của tệp HTML được viết bằng
2. The tag is used to indicate the beginning of HTML document.
3. As above shown tag is containing information about webpage and if you need any external file those links are declared here. tag is used for set the webpage title.
4. Both and tags having their pair end tag, so we need to close the ending tags respectively. If your not closed anyone of ending tag properly that is also affect the webpage result.
5. tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
6. tag with ‘file’ type for uploading files and ‘accept’ attribute defines uploaded file must be image with any extension like .png, .jpg, .jpeg or .gif.
7. Như chúng ta đã thấy về sự kiện onchange[] được sử dụng để nhận giá trị của hình ảnh khi trạng thái rỗng của nó thay đổi thành sự kiện trạng thái uploed được kích hoạt. Vì vậy, nó chuyển giá trị của hình ảnh sang hàm loadFile[]
8. In loadFile[] function image value passed as parameter. Variable ‘image’ pointing tag by ID ‘output’. Target returns the DOM element that triggered an specific event, so we can retrieve any property or attribute value.
9. Vì vậy, sự kiện. Mục tiêu. files[0] dòng này đã truy xuất giá trị hình ảnh và URL. phương thức createObjectURL[] thu thập chuỗi URL hình ảnh đã tải lên. Cuối cùng, chúng tôi nhận được đường dẫn của hình ảnh đã tải lên, sau đó PATH này đặt nó thành biến hình ảnh
10. ‘image’ variable containing uploaded image URL binds to tag in html, so the uploaded file finally displayed on webpage.
11. Lần lượt đóng cả hai thẻ , . Thẻ cho biết phần cuối của nội dung, Sau đó, thẻ cho biết phần cuối của tài liệu HTML

Phần kết luận. -

Tóm lại, chúng tôi có thể biết tải lên và hiển thị hình ảnh trong html. Ở đây để đạt được kết quả này, chúng tôi đã sử dụng nhiều phương thức, chức năng và sự kiện hơn

Ở đầu ra khi người dùng nhấp vào 'chọn tệp' sẽ mở ra cửa sổ mới để chọn hình ảnh sau khi hình ảnh đó sẽ hiển thị trên trang web sau một vài giây

Sử dụng javascript, chúng tôi nhận được kết quả nhanh chóng và dễ dàng. Tôi hy vọng hướng dẫn tải lên hình ảnh trong HTML và hiển thị này sẽ giúp ích cho bạn và các bước cũng như phương pháp được đề cập ở trên sẽ dễ thực hiện và thực hiện

Sử dụng thuộc tính chấp nhận của thẻ đầu vào. Để chỉ chấp nhận PNG, JPEG và GIF, bạn có thể sử dụng đoạn mã sau

Your Image File
  

Hoặc đơn giản

Your Image File
  

Lưu ý rằng điều này chỉ cung cấp gợi ý cho trình duyệt về loại tệp sẽ hiển thị cho người dùng, nhưng điều này có thể dễ dàng bị phá vỡ, vì vậy bạn cũng phải luôn xác thực tệp đã tải lên trên máy chủ

Nó sẽ hoạt động trong IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, nhưng hỗ trợ rất sơ sài trên điện thoại di động [kể từ năm 2015] và theo một số báo cáo, điều này thực sự có thể ngăn một số trình duyệt di động tải lên bất kỳ thứ gì,

Làm cách nào để chèn hình ảnh vào HTML?

HTML có chấp nhận PNG không?