javascript - 如何使用多个按钮上传多个文件

问题描述

我有一个代码，它在我的谷歌驱动器中创建一个文件夹，并允许用户上传多个文件，并将文件上传作为输入。

脚本.html

     <!DOCTYPE html>
    <html>
    <head>
    <base target="_top">
    </head>
    <body>
    <script>
    (function($){
        function floatLabel(inputType){
            $(inputType).each(function(){
                var $this = $(this);
                $this.focus(function(){
                                    $this.next().addClass("active");
                        });
                        $this.blur(function(){
                    if($this.val() === '' ||         $this.val() === 'blank'){
                                $this.next().removeClass();
                            }
                        });
                            });
                }
        floatLabel(".floatLabel");
    })(jQuery);

    jQuery(".mail-btn").on("click touchstart", function () {
        jQuery(this).addClass("fly");
        that = this
        setTimeout(function() {
            jQuery(that).removeClass("fly");
        }, 5400)
    });


      var rootFolderId = 'MYFOLDERID';
            var numUploads = {};
            numUploads.done = 0;
            numUploads.total = 0;
            // Upload the files into a folder in drive
            // This is set to send them all to one folder (specificed in the .gs file)
            function uploadFiles() {
                        //var allFiles = document.getElementById('myFiles').files;
                        var allFiles =                 document.querySelector('input[type=file]').files;
                        var applicantName = document.getElementById('pname').value;
                        if (!applicantName) {
                            window.alert('Missing applicant name!');
                        }
                        var applicantEmail =                 document.getElementById('email').value;
                        if (!applicantEmail) {
                            window.alert('Missing applicant email!');
                        }
                        var folderName = applicantName + ' ' + applicantEmail;
                        if (allFiles.length == 0) {
                            window.alert('No file selected!');
                } else {
                    numUploads.total = allFiles.length;
                    google.script.run.withSuccessHandler(function(r) {
                        // send files after the folder is created...
                        for (var i = 0; i < allFiles.length; i++) {
                            // Send each file at a time
                            uploadFile(allFiles[i], r.folderId);
                        }
                    }).createFolder(rootFolderId, folderName);
                }
            }
            function uploadFile(file, folderId) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var content = reader.result;
                    //document.getElementById('files1').innerHTML = 'uploaded '
                            + file.name + '...';
                    //window.alert('uploading ' + file.name + '...');                
                    google.script.run.withSuccessHandler(showSuccess)
                    .uploadFile(content, file.name, folderId);
                }
                reader.readAsDataURL(file);
                //document.getElementById('Assessment-form').reset();
            }


      function showSuccess(e) {
              $('#forminner').hide();
              $('#success').show();
              $('#Assessment-form').trigger("reset");  
             }

    </script>
    </body>
    </html>

表单.html

    <input type="file" id="myFiles1" class="floatLabel" name="f1" multiple>
    <input type="file" id="myFiles2" class="floatLabel" name="f2" multiple>

这允许我使用单个文件按钮（仅使用 myFiles1）上传多个文件。我正在尝试使用多个文件按钮（myFiles1 和 myFiles2）在同一文件夹中上传文件。我试图改变

    var allFiles =               document.querySelector('input[type=file]').files;

有多种东西，例如 querySelectorAll 但它不起作用。

标签： javascriptjquerygoogle-apps-scriptgoogle-drive-api

javascript - 如何使用多个按钮上传多个文件 - Google Apps 脚本

问题描述

解决方案

推荐阅读