Ví dụ tải lên nhiều tệp html

Tôi đang nghiên cứu một thứ hơi thú vị với điều khiển tải lên nhiều tệp, nhưng trong khi điều đó đang được phát triển, tôi nghĩ rằng tôi muốn chia sẻ một mẹo nhanh về cách làm việc với điều khiển tải lên nhiều tệp nói chung

Nếu bạn không rõ tôi đang nói về điều gì, ý tôi chỉ đơn giản là thêm thuộc tính multiple vào thẻ đầu vào để tải tệp lên. như vậy

Trong các trình duyệt hỗ trợ nó, người dùng sẽ có thể chọn nhiều tệp. Trong các trình duyệt không hỗ trợ, nó vẫn hoạt động tốt dưới dạng kiểm soát tệp, nhưng chúng bị giới hạn ở một tệp. Về lý thuyết, điều này khá đơn giản để sử dụng, nhưng có một vấn đề về trải nghiệm người dùng khiến tôi khó chịu. Đây là ảnh chụp màn hình của một biểu mẫu sử dụng điều khiển này. Tôi đã chọn hai tệp

Nhận thấy một cái gì đó? . Bây giờ rõ ràng ở dạng nhỏ như thế này thì đó không phải là vấn đề lớn, nhưng ở dạng lớn hơn, người dùng có thể quên hoặc chỉ muốn kiểm tra lại trước khi họ gửi biểu mẫu. Thật không may, không có cách nào để làm điều đó. Nhấp vào nút Duyệt qua chỉ cần mở lại bộ chọn tệp. Đáng ngạc nhiên là IE xử lý việc này tốt nhất. Nó cung cấp một danh sách chỉ đọc những gì bạn đã chọn

Người ta có thể sử dụng một chút CSS để làm cho trường đó lớn hơn một chút cho chắc chắn và dễ đọc hơn, nhưng bạn hiểu ý. Vậy làm cách nào chúng tôi có thể cung cấp một số phản hồi cho người dùng về những tệp họ đã chọn?

Trước tiên, hãy thêm một trình xử lý thay đổi đơn giản vào trường nhập liệu của chúng ta

document.addEventListener["DOMContentLoaded", init, false];
	
function init[] {
	document.querySelector['#files'].addEventListener['change', handleFileSelect, false];
}

Tiếp theo, hãy viết một trình xử lý sự kiện và xem liệu chúng ta có thể truy cập vào thuộc tính tệp của sự kiện không. Không phải tất cả các trình duyệt đều hỗ trợ điều này, nhưng trong những trình duyệt hỗ trợ, chúng ta có thể liệt kê chúng

function handleFileSelect[e] {
		
	if[!e.target.files] return;
		
	var files = e.target.files;
	for[var i=0; i < files.length; i++] {
		var f = files[i];
	}
		
}

Đối tượng tệp cung cấp cho chúng ta một vài thuộc tính, nhưng thuộc tính mà chúng ta quan tâm là tên. Vì vậy, hãy tạo một bản demo đầy đủ về điều này. Tôi sẽ thêm một div nhỏ bên dưới trường nhập liệu của mình và sử dụng nó làm nơi liệt kê các tệp của tôi

Proper Title

    

	
	

        Files: 


        


        
	

	
	var selDiv = "";
		
	document.addEventListener["DOMContentLoaded", init, false];
	
	function init[] {
		document.querySelector['#files'].addEventListener['change', handleFileSelect, false];
		selDiv = document.querySelector["#selectedFiles"];
	}
		
	function handleFileSelect[e] {
		
		if[!e.target.files] return;
		
		selDiv.innerHTML = "";
		
		var files = e.target.files;
		for[var i=0; i