使用Javascript上传多个文件

时间:2015-01-06 12:48:16

标签: javascript php cakephp

有没有办法做到这一点?我的意思是将多个文件上传到文件夹?

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

enter image description here

但我想要做的就是这个(如果你点击这个小+,然后来新的输入,你可以选择另一个文件。):

enter image description here

上传文件查看代码

<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;

上传文件控制器代码

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();
    }

并在视图文件中我有这个,使用这个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?

非常感谢!

1 个答案:

答案 0 :(得分: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>