2013-03-31 76 views
18

我想使用一个文件输入元素将多个文件上传到使用html格式的驱动器。这似乎只适用于一个文件,虽然文件选择器允许选择多个文件。回到脚本日志查看器中,我只能看到我上传的两个文件中的一个文件。这是不受支持的,还是我以错误的方式呢?如何使用一个文件输入元素上传多个文件

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> 

日志视图:

{"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}} 

回答

8

的多个文件的对话框中选择当您单击浏览按钮的文件字段仅适用于new browsers supporting HTML5。它不会允许多个选择旧的浏览器。对于旧版浏览器来说,唯一不错的解决方案是Flash或JavaScript插件。这里是jquery上传器的一个很好的资源(一些支持多个文件):http://creativefan.com/10-ajax-jquery-file-uploaders/。因此,我的建议是使用一些插件,以支持旧的以及新的浏览器。

+1

谢谢Ujwal,我已经试过[jQuery的多文件上传插件(http://www.fyneworks.com/jquery/multiple-file-upload/#)从链接您提供和它的工作完善!。我意识到浏览器的限制,但认为我被允许选择多个文件但是只有一个被分配给该元素是奇怪的。作为最后的手段,我将添加+和 - 按钮来创建/删除其他元素,但这样更优雅:) – jad

4

我使用的可能性,发送文件的阵列。只需添加[]命名atrribute:

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

您将有数组的数组中$_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 
       ) 

     ) 

) 

当然,你,你就必须上传到一个接一个。对大量文件不方便,但适用于所有浏览器。例如,使用jQuery,您可以在每次最后一次输入更改files[]时再添加一个输入。

function addOneMoreInput() { 
    $('input[type=file]').last().change(function() { 
     $(this).after('<input type="file" name="files[]" />'); 
     $(this).off('change'); 
     addOneMoreInput(); 
    }); 
} 
addOneMoreInput(); 
相关问题