Cách tải lên và hiển thị nhiều hình ảnh trong html

Trong bài viết này, tôi sẽ giải thích cách xem trước nhiều hình ảnh trước khi tải lên bằng điều khiển HTML INPUT FileUpload bằng JavaScript jQuery, CSS và HTML5

Xem trước nhiều hình ảnh được hiển thị bằng HTML5 FileReader API trong các trình duyệt hỗ trợ HTML5 i. e. Internet Explorer 10 và 11+, Mozilla FireFox, Google Chrome và Opera

Lưu ý . Ở bài viết trước mình đã Show (Hiển thị) xem trước hình ảnh trước khi upload bằng jQuery. Bài viết này là phần mở rộng của bài viết trước của tôi, nơi hỗ trợ xem trước nhiều hình ảnh.

Đánh dấu HTML

Đánh dấu HTML bao gồm điều khiển HTML FileUpload và DIV sẽ được sử dụng để hiển thị bản xem trước trực tiếp của nhiều hình ảnh

Lưu ý. Đối với điều khiển HTML INPUT FileUpload, điều rất quan trọng là đặt thuộc tính nhiều HTML5 thành nhiều để cho phép chọn nhiều tệp.

<đầu vào id="fileupload" type<="file" multiple="multiple" />

<giờ />

<b>Xem trước trực tiếp b>

<br />

<br />

<div id="dvPreview">

div>div>

Xem trước nhiều hình ảnh trước khi tải lên bằng điều khiển FileUpload bằng JavaScript

Bên trong trình xử lý sự kiện onload của cửa sổ, một trình xử lý sự kiện OnChange đã được gắn vào điều khiển HTML INPUT FileUpload

Khi các tệp được chọn trong điều khiển FileUpload, trước tiên, kiểm tra sẽ được thực hiện để đảm bảo rằng trình duyệt hỗ trợ API FileReader HTML5 và nếu nó hỗ trợ thì một vòng lặp sẽ được thực thi trên các tệp đã chọn trong HTML INPUT FileUpload control.

Mỗi tệp được xác thực bằng Biểu thức chính quy để đảm bảo rằng Tệp được chọn là tệp Hình ảnh hợp lệ. Nếu tệp là một tệp Hình ảnh hợp lệ thì nó được đọc dưới dạng chuỗi BASE64 bằng cách sử dụng phương thức readAsDataURL của HTML5 FileReader API và được đặt làm nguồn thành một phần tử Hình ảnh động, cuối cùng được đính kèm vào HTML DIV dvPreview

Ở đây tôi sẽ chỉ cho bạn cách tải lên nhiều hình ảnh và hiển thị từng hình ảnh một sau khi hình ảnh được tải lên bằng ngôn ngữ lập trình Python. Tôi đang sử dụng ở đây Flask làm khung dựa trên web dựa trên ngôn ngữ Python

Trên UI (Giao diện người dùng) có một trường nhập liệu được sử dụng để chọn nhiều tệp. Để chọn nhiều file sau khi bấm vào nút duyệt bạn cần giữ phím Ctrl (Windows OS) trên bàn phím và bấm vào hình ảnh muốn chọn tải lên

bài viết liên quan

• Tải lên và hiển thị hình ảnh bằng Python và Flask

Tôi đã thêm một số xác nhận cơ bản về loại tệp, tôi. e. , chỉ các tệp hình ảnh sẽ được tải lên. Nếu bạn chọn các tệp không phải hình ảnh thì các tệp này sẽ không được tải lên. Nó sẽ không đưa ra bất kỳ lỗi nào trong trường hợp tệp không phải hình ảnh nhưng sẽ không được tải lên

điều kiện tiên quyết

Trăn 3. 8. 3 – 3. 9. 1, Bình 1. 1. 2

thư mục dự án

Tạo một thư mục gốc của dự án có tên python-flask-upload-display-multiple-images theo vị trí bạn đã chọn

Tôi có thể không đề cập đến tên thư mục gốc của dự án trong các phần tiếp theo nhưng tôi sẽ cho rằng tôi đang tạo các tệp liên quan đến thư mục gốc của dự án

Cấu hình bình

Bạn cần phiên bản bình để chạy ứng dụng web bằng khung Flask

Tôi cũng sẽ xác định vị trí tải tệp lên và kích thước tối đa của tệp mà người dùng có thể tải lên

Bạn không nên cho phép người dùng tải lên kích thước tệp không giới hạn vì lý do bảo mật hoặc để tránh làm cạn kiệt dung lượng máy chủ

Thư mục tiêu chuẩn để lưu trữ các tài nguyên tĩnh như hình ảnh, css, tệp JavaScript vào ứng dụng Flask là đặt trong thư mục tĩnh. Ở đây tôi đang đặt tệp đã tải lên trong thư mục tĩnh/tải lên từ đó cuối cùng tệp sẽ hiển thị hình ảnh trên trang web

Tạo một tệp có tên ứng dụng. py bằng mã bên dưới

from flask import Flask

UPLOAD_FOLDER = 'static/uploads/'

app = Flask(__name__)
app.secret_key = "secret key"
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024

Tải lên nhiều hình ảnh

Tiếp theo, tôi sẽ tạo chính. py script để định cấu hình điểm cuối để tải nhiều hình ảnh lên. Nó xác định các URI cần thiết để thực hiện các thao tác tải tệp lên

Tôi đã cho phép một số loại hình ảnh nhất định, chẳng hạn như png, jpg, jpeg, gif

Tôi đang sử dụng phương thức http POST để tải tệp hình ảnh lên. sau khi tải lên và lưu hình ảnh vào đĩa, tôi sẽ trả lại tên tệp cho mẫu bình jinja2

Tôi có một chức năng khác display_image() được sử dụng trên mẫu bình để hiển thị hình ảnh thực tế từ thư mục static/uploads

Dòng dưới đây là bắt buộc khi bạn chỉ muốn phân phát tệp hoặc hình ảnh từ thư mục tĩnh

return redirect(url_for('static', filename='uploads/' + filename), code=301)

Tôi đã sử dụng tải lên. html trang để tải nhiều tệp lên thư mục mong muốn

import os
from app import app
import urllib.request
from flask import Flask, flash, request, redirect, url_for, render_template
from werkzeug.utils import secure_filename

ALLOWED_EXTENSIONS = set(['png', 'jpg', 'jpeg', 'gif'])

def allowed_file(filename):
	return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
	
@app.route('/')
def upload_form():
	return render_template('upload.html')

@app.route('/', methods=['POST'])
def upload_image():
	if 'files[]' not in request.files:
		flash('No file part')
		return redirect(request.url)
	files = request.files.getlist('files[]')
	file_names = []
	for file in files:
		if file and allowed_file(file.filename):
			filename = secure_filename(file.filename)
			file_names.append(filename)
			file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
		#else:
		#	flash('Allowed image types are -> png, jpg, jpeg, gif')
		#	return redirect(request.url)

	return render_template('upload.html', filenames=file_names)

@app.route('/display/')
def display_image(filename):
	#print('display_image filename: ' + filename)
	return redirect(url_for('static', filename='uploads/' + filename), code=301)

if __name__ == "__main__":
    app.run()

Tệp Xem mẫu

Vị trí mặc định trong các ứng dụng dựa trên bình của mẫu hoặc tệp xem là thư mục mẫu. Đây là tải lên. trang html được lưu giữ trong thư mục mẫu

Select multiple images to upload and display

	{% with messages = get_flashed_messages() %}
	  {% if messages %}
		

		{% for message in messages %}
		  
{{ message }}
		{% endfor %}
		
	  {% endif %}
	{% endwith %}



    

		

			
		
    
    

		
	


{% if filenames %}
	{% for filename in filenames %}
		

			
		
	{% endfor %}
{% endif %}

Triển khai ứng dụng

Bây giờ, hãy điều hướng đến thư mục gốc của dự án bằng công cụ dòng lệnh và thực hiện lệnh python main.py, máy chủ của bạn sẽ được khởi động trên cổng mặc định 5000

Nếu muốn thay đổi cổng, bạn có thể thay đổi dòng app.run() thành app.run(port=5001), trong đó 5001 là cổng mới

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 nhiều hình ảnh trước khi tải lên trong javascript?