Question

我需要在单个提交按钮功能中上传来自不同输入类型文件的三个图像以及文本字段，这里我上传我的代码，这个代码在我只上传一个输入类型文件时工作，但我有一些问题而上传多个输入类型文件，

我的观看文件

                    <form method="POST" action="" id="employees" enctype="multipart/form-data">                 
                    <div class="col-md-8">
                          <input type="text" class="form-control" name="e_blood" id="e_blood" value=""/>
                        </div>
                      </div>
                    </div>

                    <div class="row margin-bottom-10">
                      <div class="form-group">
                        <label class="col-md-4 control-label">ID Proof</label>
                        <div class="col-md-8">
                          <input type="file" class="form-control" name="e_idproof" id="e_idproof"/>
                        </div>
                      </div>
                    </div>  

                    <div class="row margin-bottom-10">
                      <div class="form-group">
                        <label class="col-md-4 control-label">Photo</label>
                        <div class="col-md-8">
                          <input type="file" class="form-control" name="e_photo" id="e_photo"/>
                        </div>
                      </div>
                    </div>

                    <div class="row margin-bottom-10">
                      <div class="form-group">
                        <label class="col-md-4 control-label">Pre-Employment proof</label>
                        <div class="col-md-8">
                          <input type="file" class="form-control" name="e_preemp" id="e_preemp"/>
                        </div>
                      </div>
                </form>
                <button type="submit" class="btn red" onclick="add_employee();" name="submit" data-dismiss="modal">Submit</button>
        </div>

我的ajax代码

$.ajaxFileUpload({
            url             :'<?php echo base_url(); ?>index.php?/employee_master_table/addemployee', 
            secureuri       :false,
            fileElementId   :'e_idproof',
            dataType        : 'json',
            data            : {                         'e_blood':$("#e_blood").val(),
                                'e_exp':$("#e_exp").val(),
                                'e_group':$("#e_group").val(),
                                },
            success : function (data, status)
            {
                alert(data.msg);
            }
        });

我的控制器

public function addemployee(){                  
        $this->load->helper('url');
        $status = "";
        $msg = "";
        $file_element_name = 'e_idproof';            
        if (empty($_POST['e_blood']))
        {
            $status = "error";
            $msg = "Please enter a e_blood";
        }            
        if ($status != "error")
        {   $config['upload_path'] = './assets/uploads/';
            $config['allowed_types'] = 'gif|jpg|png|doc|txt';
            $config['max_size'] = 1024 * 8;
            //$config['encrypt_name'] = TRUE;
            //$config['encrypt_name'] = false;
            $newname=$_POST['e_id']."_".$_POST['e_name'];
            $config['file_name'] = $newname;

            $this->load->library('upload', $config);

            if (!$this->upload->do_upload($file_element_name))
            {
                $status = 'error';
                $msg = $this->upload->display_errors('', '');
            }
            else
            {
                $data = $this->upload->data();                  
                $this->load->database();        
                $this->load->model('kaspon_employee_table');
                $file_id = $this->kaspon_employee_table->addemployee($data['file_name'],$_POST['e_blood'], $_POST['e_exp'], $_POST['e_group']);                 
                if($file_id)
                {
                    $status = "success";
                    $msg = "File successfully uploaded";
                }
                else
                {
                    unlink($data['full_path']);
                    $status = "error";
                    $msg = "Something went wrong when saving the file, please try again.";
                }
            }
            @unlink($_FILES[$file_element_name]);   
            }               
        }
        echo json_encode(array('status' => $status, 'msg' => $msg));

我的模特是

public function addemployee($filename,$e_id,$e_name,$r_man,
    $dateofbirth,$doj,$e_qual,$e_address,$e_paddress,$e_email,
    $e_mobile,$e_e_con,$e_blood,$e_exp,$e_group){   
        $data=array(    
            'photo'      => $filename,
            'bloodgrp'=>$e_blood,
            'experience'=>$e_exp,
            'division'=>$e_group,
        );
        $this->db->insert('employeemanager', $data);
        return $this->db->insert_id();
    }

Answer 1

ajaxFileUpload不支持一次上传多个文件。您有两种选择：

使用其他上传插件，例如 - http://hayageek.com/docs/jquery-upload-file.php

三次调用你的ajaxFileUpload代码：

function upload_file (file_input_id, callback) {
    $.ajaxFileUpload({
        url : '<?php echo base_url(); ?>index.php?/employee_master_table/addemployee', 
        secureuri: false,
        fileElementId: file_input_id,
        dataType: 'json',
        data: {
            'e_blood':$("#e_blood").val(),
            'e_exp':$("#e_exp").val(),
            'e_group':$("#e_group").val(),
        },
        success: function (data, status) {
            callback()
        }
    })
}

upload_file('e_idproof')
upload_file('e_photo')
upload_file('e_preemp')

如果您想知道上传所有三个文件的时间，您可以使用async，promises或只是简单地使用回调：

upload_file('e_idproof', function () {
    upload_file('e_photo', function () {
        upload_file('e_preemp', function () {
            console.log('all three files uploaded')
        })
    })
})

使用ajaxFileUpload.js在codeigniter中上传来自不同输入类型文件的3个图像

1 个答案: