使用AJAX和Codeigner上传多个文件

Multiple file upload with AJAX and Codeigniter

本文关键字:文件 AJAX Codeigner 使用      更新时间:2024-04-29

嗨,我正在尝试使用ajax和codeigniter上传多个图像。我是ajax和jquery的新手,所以请帮助我理解我做错了什么或没有做

这是我的控制器代码和上传功能:

    private function setup_upload_option()
{
    $config = array();
    $config['upload_path'] = './data/images/gallery_images';
    $config['allowed_types'] = 'jpg|png|gif';
    $config['encrypt_name'] = TRUE;
    $config['overwrite'] = FALSE;
    return $config;
}
function upload()
{
    $this->check_is_validated();
    $data['error'] = array('error' => '');
    $files = $_FILES;
    $id = $this->input->post('galleryID');
    if ($_POST) {
        $count = count($_FILES['userfile']['name']);
        for ($i = 0; $i < $count; $i++) {
            $_FILES['userfile']['name'] = $files['userfile']['name'][$i];
            $_FILES['userfile']['type'] = $files['userfile']['type'][$i];
            $_FILES['userfile']['tmp_name'] = $files['userfile']['tmp_name'][$i];
            $_FILES['userfile']['size'] = $files['userfile']['size'][$i];
            $_FILES['userfile']['error'] = $files['userfile']['error'][$i];
            $this->upload->initialize($this->setup_upload_option());
            if ($this->upload->do_upload() == FALSE) {
                $data['error'] = $this->upload->display_errors();
                $data['title'] = 'Create a New Property';
                $data['content'] = 'admin' . '/gallery';
                $this->load->view('templates/dashboard/template', $data);
            } else {
                $upload_data = $this->upload->data();
                $data = array(
                    'gallery_id' => $id,
                    'image_name' => $upload_data['file_name'],
                    'image_size' => $upload_data['file_size'],
                    'image_ext' => $upload_data['file_ext'],
                    'full_path' => $upload_data['file_path']
                );
                $this->db->insert('gallery_images', $data);
            }
        }
    }
}

这是我使用ajax和jquery的视图文件:

<div class="modal fade" role="dialog" id="modalUpload">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
                <?php echo form_open_multipart('gallery/upload', array('id' => 'galleryImages')) ?>
                <div class="form-group">
                    <label for="gallery">Please select which gallery to upload to:</label>
                    <select class="form-control" name="galleryID">
                        <option value="0"></option>
                        <?php foreach ($gallery as $item) { ?>
                            <option value="<?= $item['ID'] ?>"><?= $item['gallery_name']; ?></option>
                        <?php } ?>
                    </select>
                </div>
                <div class="form-group">
                    <label for="images">Please select some images for upload!</label>
                    <input type="file" name="file[]" class="form-control" id="file" multiple/>
                </div>
                <?php echo form_close(); ?>
            </div>
            <script>
                function doUpload() {
                    var form_data = {
                        $('#galleryID').val();
                }
                    $.ajax({
                        url: '<?php echo base_url(). 'gallery/upload'?>',
                        type: 'POST',
                        data: form_data,
                        success: function (data) {
                            $('#modalUpload').modal('hide'); // hide the modal
                            $('#galleryImages')[0].reset(); // reset form on modals
                            $('#galimg').load('<?=base_url();?>' + "#galimg"); // reload the view
                        });
                }
                }
            </script>
            <div class="modal-footer">
                <button type="button" style="margin-left: 10px;" class="btn btn-success pull-right"
                        onclick="doUpload()"><i class="fa fa-upload"></i> Upload Images
                </button>
                <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times">&nbsp;</i>Close
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

我的问题是,如何通过jquery将选定的文件传递到控制器以上传到数据库中?

你好,你可以使用dropzone在你的视图中上传多个图像集dropzone非常容易,它的javascript代码看起来像这个

var myDropzone = new Dropzone({
                        url: "URL",
                        paramName: "Image",
                        uploadMultiple: true,
                        parallelUploads: 1,
                        addRemoveLinks: true,
                        autoDiscover: false,
                        dataType: "json",
                        removedfile: function (file) {
                        },
                        init: function () {
                        },
                    });

在您的控制器中,您可以获得图像阵列和简单使用的图像上传功能

http://dropzonejs.com/