2013-03-31 19 views
18

Tôi đang cố sử dụng một phần tử nhập tệp để tải nhiều tệp lên Drive bằng biểu mẫu html. Điều này dường như chỉ hoạt động đối với một tệp, mặc dù bộ chọn tệp cho phép chọn nhiều tệp. Quay trở lại trình xem nhật ký tập lệnh, tôi chỉ thấy một tệp được chụp của hai tệp mà tôi đã tải lên. Điều này không được hỗ trợ hay tôi đang đi sai về nó?Cách tải lên nhiều tệp bằng một phần tử nhập tệp

Code.gs:

function logForm(form) { 
    Logger.log(JSON.stringify(form)); 
    return true; 
} 

index.html:

<html> 
    <form id="uploadTest" enctype="multipart/form-data"> 
    <input type="file" multiple="multiple" name="fileUpload"> 
    <input type="button" id="upload" value="upload" 
    onclick="google.script.run.logForm(document.getElementById('uploadTest'));"> 
    </form> 
</html> 

xem Log:

{"fileUpload":{"contents":"GIF87a\u0001\u0000\u0001\u0000� 
\u0000\u0000��̖��,\u0000\u0000\u0000\u0000\u0001\u0000 
\u0001\u0000\u0000\u0002\u0002D\u0001\u0000;", 
"type":"image/gif","name":"1x1.gif","length":35}} 

Trả lời

8

Các tập tin nhiều chọn trong hộp thoại khi bạn nhấp vào nút browse của trường tệp chỉ xảy ra cho số new browsers supporting HTML5. Nó sẽ không cho phép nhiều lựa chọn cho các trình duyệt cũ. Đối với các trình duyệt cũ, các giải pháp tốt nhất là các plugin flash hoặc javascript. Đây là một tài nguyên tốt cho người tải lên jquery (một số hỗ trợ nhiều tệp): http://creativefan.com/10-ajax-jquery-file-uploaders/. Do đó đề xuất của tôi là sử dụng một số plugin để hỗ trợ của nó trên cũ cũng như các trình duyệt mới.

+1

Cảm ơn bạn Ujwal, tôi đã cố gắng [jQuery Nhiều File Upload Plugin] (http://www.fyneworks.com/jquery/multiple-file-upload/#) từ liên kết mà bạn cung cấp và nó làm việc hoàn hảo!. Tôi đã nhận thức được giới hạn trình duyệt, nhưng nghĩ rằng nó là lạ mà tôi đã được phép chọn nhiều tập tin nhưng chỉ có một được giao cho các yếu tố. Như một phương sách cuối cùng, tôi sẽ thêm các nút + và - để tạo/xóa các phần tử bổ sung, nhưng đây là cách thanh lịch hơn :) – jad

4

Tôi đang sử dụng khả năng để gửi hàng loạt các tập tin. Chỉ cần thêm [] tên atrribute:

<form action="/" enctype="multipart/form-data" method="post"> 
    <input type="file" name="files[]" /> 
    <input type="file" name="files[]" /> 
    // etc. 
    <input type="submit"> 
</form> 

Bạn sẽ có mảng của mảng trong $_FILES

Array 
(
    [files] => Array 
     (
      [name] => Array 
       (
        [0] => 1.png 
        [1] => 2.png 
       ) 

      [type] => Array 
       (
        [0] => image/png 
        [1] => image/png 
       ) 

      [tmp_name] => Array 
       (
        [0] => /tmp/phpDQOZWD 
        [1] => /tmp/phpCELeSw 
       ) 

      [error] => Array 
       (
        [0] => 0 
        [1] => 0 
       ) 

      [size] => Array 
       (
        [0] => 32209 
        [1] => 64109 
       ) 

     ) 

) 

Tất nhiên, bạn bạn sẽ phải tải chúng từng cái một. Không thuận tiện cho một số lượng lớn tệp nhưng hoạt động trong tất cả các trình duyệt. Ví dụ, bằng cách sử dụng jQuery, bạn có thể thêm một đầu vào khác mỗi khi lần nhập files[] được thay đổi lần cuối.

function addOneMoreInput() { 
    $('input[type=file]').last().change(function() { 
     $(this).after('<input type="file" name="files[]" />'); 
     $(this).off('change'); 
     addOneMoreInput(); 
    }); 
} 
addOneMoreInput(); 
Các vấn đề liên quan