Làm cách nào để xem trước nhiều hình ảnh trước khi tải lên trong javascript?

ĐỂ LẠI MỘT TRẢ LỜI

Nhận xét

Vui lòng nhập nhận xét của bạn

Tên. *

Vui lòng nhập tên của bạn vào đây

E-mail. *

Bạn đã nhập sai địa chỉ email

Vui lòng nhập địa chỉ email của bạn vào đây

Trang mạng

Lưu tên, email và trang web của tôi trong trình duyệt này cho lần bình luận tiếp theo

Vui lòng nhập câu trả lời bằng chữ số

ba × hai =

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tải lên nhiều hình ảnh với tính năng xem trước hình ảnh bằng jQuery Ajax và PHP. Chúng tôi sử dụng jQuery và giúp tải hình ảnh lên máy chủ

Bạn cũng có thể thích hình ảnh tải lên mà không cần làm mới trang bằng ajax và PHP

Tham gia với hơn 27.000 thành viên trong nhóm Google của bạn và nhận các hướng dẫn mới nhất

Nhận các hướng dẫn mới nhất của chúng tôi, Hướng dẫn cách thực hiện về phát triển web mỗi ngày ngay trong hộp thư đến của bạn

HÃY XEM THỬ HƯỚNG DẪN TRỰC TIẾP NÀY →

Để tải lên nhiều hình ảnh với tính năng xem trước hình ảnh, chỉ cần hai bước. -

1. Tạo một tệp HTML và xác định đánh dấu và viết kịch bản
2. Tạo một tệp PHP để tải lên hình ảnh

Bước 1. Tạo một tệp HTML và xác định đánh dấu và viết kịch bản

Chúng tôi tạo một tệp HTML và lưu nó với tên tải lên. html

Trong bước này, chúng tôi tạo một biểu mẫu để tải lên và xem trước nhiều hình ảnh, sau đó chúng tôi tạo một thẻ tệp và thêm 'nhiều', nó cho phép chọn nhiều hình ảnh và đính kèm sự kiện onchange để gọi hàm preview_image() để xem trước tất cả các hình ảnh sau khi người dùng chọn hình ảnh

Chúng tôi bao gồm Plugin jQuery và jQuery Form để tải lên hình ảnh sau đó chúng tôi sử dụng tài liệu. chức năng sẵn sàng gọi ajaxForm để bất cứ khi nào người dùng nhấp vào nút gửi, tất cả các hình ảnh sẽ được tải lên máy chủ và sau đó cảnh báo người dùng về 'Tải lên thành công'

Bạn cũng có thể kéo và thả hình ảnh tải lên bằng jQuery và PHP

Trong hàm preview_image() trước tiên chúng ta lấy bao nhiêu hình ảnh được chọn sau đó chúng ta sử dụng vòng lặp for để xem trước từng hình ảnh một bằng cách sử dụng hàm createObjectURL của javascript

Bước 2. Tạo một tệp PHP để tải lên hình ảnh

Chúng tôi tạo một tệp PHP và lưu nó với tên upload_file. php

Trong bước này, chúng ta sử dụng vòng lặp for để tải lên tất cả các hình ảnh trong thư mục hình ảnh bằng hàm move_uploaded_file()

Bạn cũng có thể thích tải lên hình ảnh từ url bằng PHP

Đó là tất cả, đây là cách tải lên nhiều hình ảnh với bản xem trước hình ảnh bằng jQuery, Ajax và PHP

Bạn có thể tùy chỉnh thêm mã này theo yêu cầu của bạn. Và xin vui lòng cho nhận xét về hướng dẫn này

Trong bài viết này, tôi sẽ chỉ cho bạn cách tạo một thiết kế xem trước và tải lên hình ảnh tùy chỉnh. Xem trước hình ảnh là một hệ thống tuyệt vời nơi bạn có thể kiểm tra trước khi tải lên một hình ảnh xem hình ảnh đó có đủ điều kiện để tải lên hay không

Đây là một hệ thống rất đơn giản mà bạn chỉ có thể tạo với sự trợ giúp của HTML và javascript. Nhưng ở đây tôi đã sử dụng một lượng nhỏ CSS để thiết kế nó

✅ Xem bản xem trước trực tiếp 👉👉 Tải lên hình ảnh với bản xem trước

HTML có nhiều loại chức năng nhập liệu, một trong số đó là văn bản, mật khẩu, email, v.v. mà chúng tôi luôn luôn sử dụng. Ngoài ra còn có một loại đầu vào khác được gọi là đầu vào tệp (<input type=" file">). Tại đây bạn có thể sử dụng bất kỳ loại tệp nào để nhập liệu

Điều này tương tự như thiết kế đầu vào chung. Chỉ 'Tệp' sẽ được sử dụng thay vì 'Mật khẩu' hoặc 'Email'. Nó sẽ nhận tệp từ thiết bị của bạn và sau đó hiển thị dưới dạng bản xem trước. Tuy nhiên, để thực hiện việc xem trước hình ảnh này, bạn phải nhờ sự trợ giúp của JavaScript hoặc JQuery. Ở đây tôi đã tạo thiết kế tải lên và xem trước hình ảnh này bằng Pure JavaScript

Xem trước hình ảnh trước khi tải lên

Bây giờ là lúc để hiểu đầy đủ cách nó được tạo ra. Trước khi bắt đầu hướng dẫn, hãy để tôi nói với bạn một số điểm quan trọng. Đầu tiên tôi thiết kế trang web bằng một số CSS. Sau đó, tôi đã tạo một hộp trên trang web. Tôi đã tạo một nút nhỏ bằng cách sử dụng đầu vào trong hộp đó

Tôi đã sử dụng một cấp độ để tạo nút này ở đây. Với điều này, tôi đã tạo một màn hình nhỏ để xem trước hình ảnh. Tôi đã triển khai nó bằng JavaScript ở phần cuối của tất cả. Cùng tham khảo cách làm đầy đủ các bước bên dưới nhé

Bước 1. Thiết kế trang web bằng CSS

Đầu tiên tôi thiết kế trang web bằng mã CSS. Ở đây chúng tôi đã đặt màu nền của trang web là màu xanh lam và chiều cao là 100vh

body {
  margin:0px;
  height:100vh;
  background: #1283da;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bước 2. Tạo cấu trúc cơ bản của bản xem trước hình ảnh

Bây giờ tôi đã tạo một hộp nhỏ trên trang web bằng một số HTML và CSS cơ bản. Như bạn có thể thấy ở trên, các nút và xem trước hình ảnh đều nằm trong hộp này

Chiều rộng của hộp là 350 px và màu nền là màu trắng. Tôi đã sử dụng một số bóng hộp ở đây để làm cho nó sáng hơn và hấp dẫn hơn

 <div class="center">
  <div class="form-input">


  </div>
</div> 

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

.center {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;

}
.form-input {
  width:350px;
  padding:20px;
  background:#fff;
  box-shadow: -3px -3px 7px rgba(94, 104, 121, 0.377),
              3px 3px 7px rgba(94, 104, 121, 0.377);
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bước 3. Tạo một nơi để xem trước hình ảnh

Tôi đã tạo một màn hình nhỏ để xem hình ảnh xem trước. Mặc dù nó không thể được nhìn thấy trong điều kiện bình thường. Điều này chỉ có thể được nhìn thấy khi chúng tôi triển khai nó với sự trợ giúp của JavaScript

 <div class="preview">
   <img id="file-ip-1-preview">
 </div>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

.form-input img {
  width:100%;
  display:none;
  margin-bottom:30px;
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bước 4. Tạo các hộp và nút đầu vào

Bây giờ tôi đã tạo một hộp nhập liệu bằng cách nhập tệp và tạo một nút ở đó. Tôi đã sử dụng mức đầu vào để tạo nút này. Sau đó, bằng cách sử dụng CSS, tôi đã tạo cho cấp độ đó hình dạng của một nút. Chiều cao nút 45 px và width 45%

 <label for="file-ip-1">Upload Image</label>
 <input type="file" id="file-ip-1" accept="image/*" onchange="showPreview(event);">

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

________số 8_______

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Bước 5. Kích hoạt tải lên hình ảnh bằng mã JavaScript

Như bạn có thể thấy ở trên, chúng tôi đã thiết kế nó hoàn chỉnh. Bây giờ tôi sẽ triển khai hệ thống xem trước hình ảnh này với sự trợ giúp của JavaScript

  function showPreview(event){
  if(event.target.files.length > 0){
    var src = URL.createObjectURL(event.target.files[0]);
    var preview = document.getElementById("file-ip-1-preview");
    preview.src = src;
    preview.style.display = "block";
  }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sau khi sử dụng js, hình ảnh xem trước và tải lên sẽ có hiệu lực đầy đủ. Sau đó, khi bạn nhấp vào nút tải lên, bạn sẽ thấy bản xem trước của bất kỳ hình ảnh nào bạn chọn từ tệp của mình

Bài liên quan

1. Thiết kế chân trang HTML CSS
2. Tạo danh sách việc cần làm bằng JavaScript
3. Đồng hồ bấm giờ đơn giản sử dụng JavaScript
4. Máy tính tuổi Javascript
5. Trình tạo mật khẩu ngẫu nhiên với JavaScript
6. Thanh trượt hình ảnh tự động trong Html, CSS
7. Menu thanh bên Sử dụng HTML CSS

Hy vọng rằng từ hướng dẫn ở trên, bạn đã học được cách tạo một hình ảnh tải lên với bản xem trước. Tôi đã tạo một hệ thống xem trước nhiều hình ảnh bằng JQuery

Làm cách nào để xem trước nhiều hình ảnh trước khi tải lên bằng JavaScript?

Làm cách nào để tải lên và hiển thị nhiều hình ảnh bằng JavaScript?

Làm cách nào để xem trước hình ảnh trước khi tải lên bằng JavaScript?

Phương pháp nào để hiển thị nhiều hình ảnh xem trước khi tải lên máy chủ?