Như những người khác chỉ ra, FileList
là chỉ đọc. Bạn có thể giải quyết vấn đề này bằng cách đẩy các tệp đó vào một riêng biệt Array
. Sau đó, bạn có thể làm bất cứ điều gì bạn muốn với danh sách tệp được sắp xếp đó. Nếu tải chúng lên máy chủ là mục tiêu, bạn có thể sử dụng API FileReader
.
Dưới đây là một vòng về cách tránh hoàn toàn cần phải sửa đổi FileList
. bước:
- Thêm tập tin bình thường thay đổi đầu vào sự kiện nghe
- Lặp qua mỗi tập tin từ sự kiện thay đổi, bộ lọc để xác nhận mong muốn
- Đẩy hồ sơ hợp lệ vào mảng riêng biệt
- Sử dụng
FileReader
API để đọc các file cục bộ
- Gửi các tệp hợp lệ, đã xử lý đến máy chủ
Event handl er và mã tập tin loop cơ bản:
var validatedFiles = [];
$("#fileToUpload").on("change", function (event) {
var files = event.originalEvent.target.files;
files.forEach(function (file) {
if (file.name.matches(/something.txt/)) {
validatedFiles.push(file); // Simplest case
} else {
/* do something else */
}
});
});
Dưới đây là một phiên bản phức tạp hơn của vòng lặp tập tin đó cho thấy làm thế nào bạn có thể sử dụng FileReader
API để tải các tập tin vào trình duyệt, và tùy chọn trình đến một máy chủ như một Base64 mã hóa blob.
files.forEach(function (file) {
if (file.name.matches(/something.txt/)) { // You could also do more complicated validation after processing the file client side
var reader = new FileReader();
// Setup listener
reader.onload = (function (processedFile) {
return function (e) {
var fileData = { name : processedFile.name, fileData : e.target.result };
// Submit individual file to server
$.post("/your/url/here", fileData);
// or add to list to submit as group later
validatedFiles.push(fileData);
};
})(file);
// Process file
reader.readAsDataURL(file);
} else {
/* still do something else */
}
});
Lưu ý thận trọng khi sử dụng FileReader
API. Base64 mã hóa một tệp sẽ tăng kích thước của nó khoảng 30%. Nếu điều đó không được chấp nhận, bạn sẽ cần phải thử một thứ khác.
Nguồn
2013-10-07 23:02:39
bạn sẽ làm gì với tệp? một khi người dùng tải lên chúng, chúng chỉ được sao chép vào thư mục tmp của bạn và thông tin của chúng được giữ trong mảng mà bạn có, vì vậy khi bạn xử lý chúng chỉ cần bỏ qua bất kỳ thứ gì có phần mở rộng sai ... –
Các bạn, không phải mảng, một đối tượng của nó với thuộc tính "0", "1", "2" vì vậy tôi không thể thực hiện các hoạt động mảng tại đây –
Thật không may, bạn không thể sửa đổi các tệp trong một FileList, vì chúng chỉ đọc. Nó cũng dường như không thể tạo ra một FileList mới. Bất kỳ cơ hội nào của bạn có thể được giải quyết bằng cách sử dụng thuộc tính 'accept' của phần tử input? Bạn có thể loại bỏ TẤT CẢ các tệp từ FileList với điều này: '$ (" # fileToUpload ") [0] .value = ''' –