2013-09-27 228 views
31

Làm cách nào để xóa một tệp được chọn cụ thể khỏi điều khiển tệp đầu vào?Cách xóa một tệp đã chọn cụ thể khỏi điều khiển tệp nhập

Tôi có quyền kiểm soát tệp đầu vào với tùy chọn để chọn nhiều tệp; tuy nhiên, tôi muốn xác thực tệp và nếu tệp có phần mở rộng sai thì tôi nên xóa tệp đó khỏi chính kiểm soát tệp, có thể không?

tôi đã cố gắng như sau

<input type="file" name="fileToUpload" id="fileToUpload" multiple/> 


<script> $("#fileToUpload")[0].files[0] </script> 

Dưới đây là ảnh chụp màn hình của đối tượng nhưng tôi không thể sửa đổi nó

enter image description here

+0

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 ... –

+3

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 –

+1

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 = ''' –

Trả lời

31

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:

  1. Thêm tập tin bình thường thay đổi đầu vào sự kiện nghe
  2. Lặp qua mỗi tập tin từ sự kiện thay đổi, bộ lọc để xác nhận mong muốn
  3. Đẩy hồ sơ hợp lệ vào mảng riêng biệt
  4. Sử dụng FileReader API để đọc các file cục bộ
  5. 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.

+2

Xin chào, chỉ một điều. các tệp là một đối tượng javascript để bạn không thể sử dụng .forEach trên đó, bạn nên làm điều này thay vì [] .forEach.call (tệp, hàm (tệp) {....}) – Fibonacci

+0

Cảm ơn. Vâng, đó là một điểm tốt. –

+0

Giải pháp này chỉ hoạt động nếu bạn KHÔNG tải lên các tệp từ Mẫu Gửi – Jorge

-9

html

<input id="fileInput" name="fileInput" type="file" /> 
<input onclick="clearFileInput()" type="button" value="Clear" /> 

javascript

function clearFileInput(){ 
     var oldInput = document.getElementById("fileInput"); 

     var newInput = document.createElement("input"); 

     newInput.type = "file"; 
     newInput.id = oldInput.id; 
     newInput.name = oldInput.name; 
     newInput.className = oldInput.className; 
     newInput.style.cssText = oldInput.style.cssText; 
     // copy any other relevant attributes 

     oldInput.parentNode.replaceChild(newInput, oldInput); 
    } 
+0

Không phải là một ý tưởng tồi ... Tôi sẽ thay đổi "thay thế' oldInput' bằng 'newInput'" bằng cách thay thế một 'hiddenInput' thực được sử dụng để gửi biểu mẫu thực tế và để' oldInput' như cũ. – skplunkerin

2

tôi nghĩ rằng tôi nên thêm nhận xét của tôi ở đây cũng như ở đây (tôi đã trả lời ở đây: JavaScript delete File from FileList to be uploaded)

Tôi tìm thấy một workaround. Điều này sẽ không yêu cầu AJAX cho yêu cầu nào cả và biểu mẫu có thể được gửi đến máy chủ. Về cơ bản, bạn có thể tạo một đầu vào hidden hoặc text và đặt thuộc tính value thành chuỗi base64 được tạo sau khi xử lý tệp được chọn.

<input type=hidden value=${base64string} /> 

Bạn có thể sẽ xem xét các ý tưởng để tạo ra nhiều tập tin đầu vào thay vì đầu vào text hoặc hidden. Điều này sẽ không hoạt động vì chúng tôi không thể gán giá trị cho nó.

Phương pháp này sẽ bao gồm các tập tin đầu vào trong các dữ liệu gửi đến các cơ sở dữ liệu và bỏ qua các tập tin đầu vào bạn có thể:

  • trong back-end không xem xét lĩnh vực này;
  • bạn có thể đặt thuộc tính disabled cho tệp đầu vào trước khi nối tiếp biểu mẫu;
  • xóa phần tử DOM trước khi gửi dữ liệu.

Khi bạn muốn xóa tệp, chỉ cần lấy chỉ mục của phần tử và xóa phần tử đầu vào (văn bản hoặc ẩn) khỏi DOM.

Yêu cầu:

  • Bạn cần phải viết logic để chuyển đổi tập tin trong base64 và lưu trữ tất cả các file bên trong một mảng bất cứ khi nào các tập tin đầu vào kích hoạt các sự kiện change.

Ưu điểm:

  • này về cơ bản sẽ cung cấp cho bạn rất nhiều tầm kiểm soát và bạn có thể lọc, so sánh file, kiểm tra kích thước tập tin, định dạng MIME, và vân vân ..