Hướng dẫn html multiple file upload show filename - html tải lên nhiều tệp hiển thị tên tệp

Tôi đang sử dụng Struts2 để tải lên nhiều tệp:

Khi tôi chọn nhiều tệp, nó sẽ hiển thị số lượng tệp, ví dụ. 3 tập tin.

Các yêu cầu của dự án là người dùng sẽ có thể xem những tệp nào anh ta đã chọn trước khi tải lên.see what files he selected before uploading.

Có thể hiển thị các tên tệp đã chọn trong danh sách hoặc có thể trong chính điều khiển không?

Andrea Ligios

48.5K25 Huy hiệu vàng112 Huy hiệu bạc231 Huy hiệu đồng25 gold badges112 silver badges231 bronze badges

Hỏi ngày 28 tháng 9 năm 2014 lúc 7:38Sep 28, 2014 at 7:38

Bạn có thể sử dụng thuộc tính HTML5 files của phần tử như sau:

updateList = function() {
    var input = document.getElementById('file');
    var output = document.getElementById('fileList');
    var children = "";
    for (var i = 0; i < input.files.length; ++i) {
        children += '
' + input.files.item(i).name + '
';
    }
    output.innerHTML = '
'+children+'
';
}

Selected files:

Đã trả lời ngày 29 tháng 9 năm 2014 lúc 14:11Sep 29, 2014 at 14:11

Andrea Ligiosandrea LigiosAndrea Ligios

48.5K25 Huy hiệu vàng112 Huy hiệu bạc231 Huy hiệu đồng25 gold badges112 silver badges231 bronze badges

11

Tôi đang làm việc với một cái gì đó 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 sẽ chia sẻ một mẹo nhanh về việc làm việc với các điều khiển tải lên nhiều tệp nói chung.

Nếu bạn không rõ ràng về những gì tôi đang nói, tôi chỉ đơn giản là thêm nhiều thuộc tính vào thẻ đầu vào để tải lên tệp. 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ó, nó vẫn hoạt động tốt như một điều khiển tệp, nhưng chúng bị giới hạn trong một tệp. Về lý thuyết, điều này là khá tầm thường để sử dụng, nhưng có một vấn đề UX khiến tôi khó chịu. Dưới đây là ảnh chụp màn hình của một biểu mẫu bằng cách sử dụng điều khiển này. Tôi đã chọn hai tệp:

Chú ý gì đó? Người dùng không nói những tập tin họ đã chọn. Bây giờ rõ ràng trong một hình thức nhỏ này, nó không phải là một thỏa thuậ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 chỉ cần mở trình chọn tệp một lần nữa. Đáng ngạc nhiên, IE xử lý điều này tốt nhất. Nó cung cấp một danh sách chỉ đọc về 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 chắc chắn và dễ đọc hơn, nhưng bạn có ý tưởng. Vậy làm thế 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 đầu vào của chúng tôi:

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 người làm, 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 tôi một vài thuộc tính, nhưng tài sản chúng tôi quan tâm là tên. Vì vậy, hãy tạo ra một bản demo đầy đủ về điều này. Tôi sẽ thêm một chút div bên dưới trường đầu vào của mình và sử dụng nó làm địa điểm để liệt kê các tệp của tôi.

    

	
	


        Files: 


        


        
	

	

Khá đơn giản, phải không? Bạn có thể xem một ví dụ về điều này ở đây: https://static.raymondcamden.com/demos/2013/sep/10/test0a.html. Và đây là một cảnh quay màn hình nhanh trong trường hợp bạn đang xem điều này trong một trình duyệt không tuân thủ.

Khá đơn giản, phải không? Chúng ta hãy đá nó lên một notch. Một số trình duyệt hỗ trợ Filereader (tham chiếu MDN), một cách cơ bản để đọc các tệp trên hệ thống người dùng. Chúng tôi có thể kiểm tra hỗ trợ Filereader và sử dụng nó để cung cấp xem trước hình ảnh. Tôi sẽ chia sẻ mã trước và sau đó giải thích cách nó hoạt động.

Chỉnh sửa vào ngày 11 tháng 9: Một lời cảm ơn lớn đến Sime Vidas vì đã chỉ ra một lỗi nhỏ ngu ngốc trong mã của tôi mà tôi đã bỏ lỡ trong lần vượt qua đầu tiên. Tôi đã tạo một lỗi mảng/gọi lại cổ điển và không nhận thấy nó. Tôi đã sửa mã và ảnh chụp màn hình, nhưng nếu bạn muốn xem mã bị hỏng, hãy xem nguồn trên https://static.raymondcamden.com/demos/2013/sep/10/test0orig.html. A big thank you to Sime Vidas for pointing out a stupid little bug in my code I missed on first pass around. I made a classic array/callback bug and didn't notice it. I fixed the code and the screen shot, but if you want to see the broken code, view source on https://static.raymondcamden.com/demos/2013/sep/10/test0orig.html.

    

	
	


        Files: 


        


        
	

	
							 

								
							  
														
							

								

																  programming
																  html
																  Select file jQuery
																  CSS upload file
																
							
							
							
							

                                    Reply
                                    3
                                    0
                                     Chia sẻ