javascript - 使用 Javascript 上传多个文件

Question

有什么办法可以做到这一点吗？我的意思是上传多个文件到文件夹中？

目前我有这个，但这里我只能上传一个文件，:

但是我想做的是这样的(如果你点击这个小+，然后出现新的输入，你可以在其中选择另一个文件。):

上传文件查看代码

<div class="users view">
<h2><?php echo __('Lisa Fail'); ?></h2>
    <?php
echo $this->Form->create('uploadFile', array( 'type' => 'file'));
echo $this->Form->input('pdf_path', array('type' => 'file','label' => ''));
//echo $this->Form->input('files.', array('type' => 'file', 'multiple'));
echo $this->Form->end('Upload file');
$image_src = $this->webroot.'files/'.$image;

上传文件 Controller 代码

public function uploadFile() {
            $filename = '';
            if ($this->request->is('post')) { // checks for the post values
        $uploadData = $this->data['uploadFile']['pdf_path'];
                if ( $uploadData['size'] == 0 || $uploadData['error'] !== 0) { // checks for the errors and size of the uploaded file
                    return false;
                }
                $filename = basename($uploadData['name']); // gets the base name of the uploaded file
                $uploadFolder = WWW_ROOT. 'files';  // path where the uploaded file has to be saved
                $filename = time() .'_'. $filename; // adding time stamp for the uploaded image for uniqueness
                $uploadPath =  $uploadFolder . DS . $filename;
                if( !file_exists($uploadFolder) ){
                    mkdir($uploadFolder); // creates folder if  not found
                }
                if (!move_uploaded_file($uploadData['tmp_name'], $uploadPath)) {
                    return false;
                } 

            }
           $this->set('image',$filename); 

    }

我有一个Javascript，也许我可以使用这个，或者不使用它(这是做什么？:它做同样的事情，但它做数字输入，你可以在其中输入数字)？

var lastRow=0;
function addNumber() { 
$("#mytable tbody>tr#number0").clone(true).attr('id','lisanumbrid'+lastRow).removeAttr('style').insertBefore("#mytable tbody>tr#trAdd"); 
$("#lisanumbrid"+lastRow+" button").attr('onclick','removeNumber('+lastRow+')'); 
$("#lisanumbrid"+lastRow+" input:first").attr('numbrid','data[Lisanumbrid]['+lastRow+'][lisanumbrid]').attr({'id':'numbridlisaNumber'+lastRow,'name': 'data[Kontaktid][lisanumbrid]['+ lastRow +']'}); 
lastRow++; 
}
    function removeNumber(x) {
        $("#lisanumbrid"+x).remove();
    }

在 View 文件中我有这个，使用这个js:

<table id="mytable">
        <tr id="number0" style="display:none;">
            <td><?php echo $this->Form->button('&nbsp;-&nbsp;',array('type'=>'button','title'=>'Click Here to remove this number')); ?></td>
            <td><?php echo $this->Form->input('lisanumbrid', array ('name'=>'data[Kontaktid][lisanumbrid][0]')) ?></td>
        </tr>
        <tr id="trAdd"><td> <?php echo $this->Form->button('+',array('type'=>'button','title'=>'Click Here to add another number','onclick'=>'addNumber()')); ?> </td><td></td><td></td><td></td><td></td></tr>
</table>
<?php echo $this->Html->script('addNumber');

有人可以帮助我并提供一些线索或解决方案吗？可以使用这个 Javascript 吗？

非常感谢!

Answer 1

您可以仅附加名称包含 [] 或 [some_array_key] 的新输入字段:

$(document).ready(function() {
  $(".plus").click(function() {
    $(".files").append("<input type='file' name='files[]'/><br/>");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="files">
  <input type="file" name="files[]" /><br/>
</div>
<button type="button" class="plus">+</button>