使用CodeIgniter和Ajax在每个输入中上传多个文件

时间:2017-10-08 16:50:44

标签: php jquery ajax codeigniter

第二次输入后我无法上传任何图像。我只能上传第一个输入。添加另一个输入值时,动态创建输入。以下是代码:

\\ jquery //
function storeupdate(){
$.ajax({
  type:"POST",
  url:"<?php echo base_url(); ?>updatestore",
  data:$("#mainstore").serialize(),
  success: function(response){
    var data = new FormData();
    input = document.getElementById('file');
      for(var i = 0; i < input.files.length; i++)
      {
        data.append('images[]', document.getElementById('file').files[i]);
      }
    $.ajax({
        type: 'POST',
        url: '<?php echo base_url(); ?>storeupload',
        cache: false,
        contentType: false,
        processData: false,
        data : data,
        success: function(result){
            console.log(result);
        },
        error: function(err){
            console.log(err);
        }
    });
    swal('Successful!', 'Data has been saved!', 'success');
    //window.location.reload();
  },
  error: function() {
    swal("Oops", "We couldn't connect to the server!", "error");
  }
 });
 return false;
 };


\\ view // 
<input type="file" name="images[]" id="file" class="file" accept="image/*;capture=camera" multiple="multiple" />
<button type="button" class="btn btn-success save" id="save" name="save" onclick="storeupdate();" disabled>Save</button>


\\ controller //
public function storeupload()
{
$files= $_FILES;
$cpt = count ($_FILES['images']['name']);
for($i = 0; $i < $cpt; $i ++) {

    $_FILES['images']['name'] = $files['images']['name'][$i];
    $_FILES['images']['type'] = $files['images']['type'][$i];
    $_FILES['images']['tmp_name'] = $files['images']['tmp_name'][$i];
    $_FILES['images']['error'] = $files['images']['error'][$i];
    $_FILES['images']['size'] = $files['images']['size'][$i];

    $this->upload->initialize ( $this->set_upload_options1() );
    $this->upload->do_upload("images");
    $fileName = $_FILES['images']['name'];
    $images[] = $fileName;
}

}

2 个答案:

答案 0 :(得分:2)

我制作并测试了一些代码示例,以便您可以看到错误。你有一些错误。我建议的第一件事实际上是使用jQuery。你的代码显然是使用jQuery,但你有各种可以简化的vanilla JS:

$(document).ready(function(){

    $('#save').on('click', function(){
        var fileInput = $('#file_input')[0];
        if( fileInput.files.length > 0 ){
            var formData = new FormData();
            $.each(fileInput.files, function(k,file){
                formData.append('images[]', file);
            });
            $.ajax({
                method: 'post',
                url:"/multi_uploader/process",
                data: formData,
                dataType: 'json',
                contentType: false,
                processData: false,
                success: function(response){
                    console.log(response);
                }
            });
        }else{
            console.log('No Files Selected');
        }
    });

});

请注意,我在ajax URL中进行了硬编码。我用于测试的控制器名为Multi_uploader.php。

接下来是在你的控制器中循环遍历$ _FILES时,需要将其转换为&#34; userfile&#34;。如果您打算使用CodeIgniter上传类,这一点非常重要:

public function process()
{
    $F = array();

    $count_uploaded_files = count( $_FILES['images']['name'] );

    $files = $_FILES;
    for( $i = 0; $i < $count_uploaded_files; $i++ )
    {
        $_FILES['userfile'] = [
            'name'     => $files['images']['name'][$i],
            'type'     => $files['images']['type'][$i],
            'tmp_name' => $files['images']['tmp_name'][$i],
            'error'    => $files['images']['error'][$i],
            'size'     => $files['images']['size'][$i]
        ];

        $F[] = $_FILES['userfile'];

        // Here is where you do your CodeIgniter upload ...
    }

    echo json_encode($F);
}

这是我用于测试的视图:

<!doctype html>
<html>
<head>
    <title>Multi Uploader</title>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="/js/multi_uploader.js"></script>
</head>
<body>
    <form>
        <input type="file" name="images[]" id="file_input" multiple />
        <button type="button" id="save">Upload</button>
    </form>
</body>
</html>

最后,为了证明文件已上传到控制器,并且我可以将它们与CodeIgniter一起使用,我将ajax响应作为json编码数组发送,并将其显示在控制台中。请参阅代码注释,将您的CodeIgniter上传代码放在哪里。

更新(显示如何处理多个文件输入)---

如果你想拥有多个文件输入,那么这显然会改变你的HTML和JS。在这种情况下,您的HTML将具有多个输入:

<input type="file" name="images[]" class="file_input" multiple />
<input type="file" name="images[]" class="file_input" multiple />
<input type="file" name="images[]" class="file_input" multiple />
<input type="file" name="images[]" class="file_input" multiple />

你的javascript需要改变以循环每个输入:

$(document).ready(function(){
    $('#save').on('click', function(){
        var fileInputs = $('.file_input');
        var formData = new FormData();
        $.each(fileInputs, function(i,fileInput){
            if( fileInput.files.length > 0 ){
                $.each(fileInput.files, function(k,file){
                    formData.append('images[]', file);
                });
            }
        });
        $.ajax({
            method: 'post',
            url:"/multi_uploader/process",
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function(response){
                console.log(response);
            }
        });
    });
});

关于您向数据库添加详细信息的评论的更多信息---

使用CodeIgniter进行上传时,会提供上传摘要:

$summary = $this->upload->data();

这是一组数据,最终看起来像这样:

$summary = array(
    'file_name'     => 'mypic.jpg',
    'file_type'     => 'image/jpeg',
    'file_path'     => '/path/to/your/upload/',
    'full_path'     => '/path/to/your/upload/jpg.jpg',
    'raw_name'      => 'mypic',
    'orig_name'     => 'mypic.jpg',
    'client_name'   => 'mypic.jpg',
    'file_ext'      => '.jpg',
    'file_size'     => 22.2
    'is_image'      => 1
    'image_width'   => 800
    'image_height'  => 600
    'image_type'    => 'jpeg',
    'image_size_str' => 'width="800" height="200"'
);

因此,每次上传后,您需要做的就是将记录添加到数据库中:

$summary = $this->upload->data();

$this->db->insert('storefiles', array(
    'Store_ID'  => $_POST['storeid'],
    'File_Name' => $summary['file_name'], 
    'Created'   => date('Y-m-d h:i:s'), 
    'Modified'  => date('Y-m-d h:i:s')
));

很容易看出你可以存储的不仅仅是文件名。

答案 1 :(得分:0)

我知道这个问题很老,但是对于像我这样在循环中使用 Code Igniter 文件上传库后遇到此错误的人:is_uploaded_file() expects parameter 1 to be string, array given 像这样:

for ( $i = 0; $i < count($var); $i++ )
{
    // other codes here

    // Do codeigniter upload
    $this->upload->do_upload('images');
}

您可以做的是不要在 do_upload() 函数中放置任何参数。像这样:

$this->upload->do_upload();