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

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

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

我制作并测试了一些代码示例,以便您可以了解问题所在。您有几处错误。我建议的第一件事实际上是使用jQuery。您的代码显然使用的是jQuery,但您可以使用各种可以简化的原始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时,需要将其转换为“ userfile”。如果您打算使用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_enpre($F);}

这是我用于测试的视图:

<!doctype html><html><head>    <title>Multi Uploader</title>    <script src="https://pre.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[]"  multiple /><input type="file" name="images[]"  multiple /><input type="file" name="images[]"  multiple /><input type="file" name="images[]"  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')));

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



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5050446.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-11-15
下一篇 2022-11-15

发表评论

登录后才能评论

评论列表(0条)

保存