上传文件后，保持在同一页面上的相同选项卡上

Question

我的注册过程有三个标签。在第二个选项卡上，我有浏览和上传文档功能。我希望保持在同一页面上，并保留所有数据，以便用户可以在上传文件后进入第三个选项卡，并且需要显示返回数据（已上载文件的名称）。我已搜索但到目前为止找不到合适的解决方案。 表单标签下面的for循环显示当数据从控制器返回到视图时上传的所有文件的名称，如同使用codeigniter一样。

View.php

<form id="fileupload" method="post" action="<?php echo site_url('upload_file/upload_it'); ?>" enctype="multipart/form-data">
    <div class="fileUpload btn btn-warning">
        <span>Browse</span>
        <input id="uploadBtn" type="file" multiple="multiple" name="files[]" class="upload" />
    </div>
    <input id="uploadFile" style="width: 160px; margin-top: 30px;float: left;height: 34px;" placeholder="Choose File" disabled="disabled" />
    <button style="padding: 4px;margin-top: 30px;border-radius: 0px;" type="submit" class="btn btn-primary btn-lg">
        <span class="glyphicon glyphicon-upload"></span>
    </button>
</form>    

<div class="col-lg-2" style="padding-left:0px;">
    <?php $upload_data=0; if($upload_data != ''):?>
         <?php for($i=0;$i<count($upload_data);$i++) { ?>
             <span><?php echo $upload_data[$i]['file_name'];?></span>
        <?php } ?>
    <?php endif;?>
</div>

在Js中获取所选文件的数量。

<script>
     document.getElementById("uploadBtn").onchange = function (){
     var files = document.getElementById("uploadBtn").files;
     if(files.length==1)
    {
    document.getElementById("uploadFile").value = this.value;
    }
    if(files.length>1)
    {
        document.getElementById("uploadFile").value = files.length+' Files Selected';
    }
};
</script>

Controller.php这样

<?php
class Upload_file extends CI_Controller
{
    function __construct()
    {
        parent::__construct();
        $this->load->helper(array('form', 'url'));
    }
    function upload_it()
    {
        $this->load->helper('form');
        $config['upload_path'] = 'application/uploads/';
        $config['allowed_types'] = '*';
        $this->load->library('upload', $config);
        $this->upload->initialize($config);
        $this->upload->set_allowed_types('*');
        $data['upload_data'] = '';
        if (!$this->upload->do_multi_upload('files'))
        {
            $data = array('msg' => $this->upload->display_errors());

        }
        else
        { 
             $data['upload_data'] = $this->upload->get_multi_upload_data();
        }   
        $this->load->view('include/header');
        $this->load->view('registration', $data);
    }
}?>

Answer 1

简单的方法是将隐藏的iframe作为target添加到<form>元素，以避免重新加载页面。

将此iframe添加到您的HTML：

<iframe id="upload_target" name="upload_target" src="#" style="display:none;"></iframe>

在target="upload_target"元素中包含属性form：

  <form target="upload_target" ...