Question

我希望使用Codeigniter和jQuery ajax创建没有刷新页面的文件上传，如下面的脚本。

我不知道如何在jQuery中使用Ajax，请帮助显示一些想法或步骤将jquery ajax与codeigniter中的文件上传相结合。

这是我的控制器：

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Upload extends Frontend_Controller {

    public function __construct() {

        parent::__construct(); 
    }
    function index()
    {
        $this->data['subview'] = 'employee/cv/upload';
        $this->load->view('_main_layout',$this->data);
    } 
    function do_upload()
    { 
        $config['upload_path'] = 'images/employee/cv';
        $config['allowed_types'] = 'gif|jpg|png';
        $config['max_size'] = '10000';
        $config['max_width']  = '1024';
        $config['max_height']  = '768'; 
        $this->load->library('upload', $config); 
        if ( ! $this->upload->do_upload('image'))
        {
            $error = array('error' => $this->upload->display_errors()); 
            $this->data['subview'] = 'employee/cv/upload';
                $this->load->view('_main_layout',$this->data);
        }
        else
        { 
            $data = array('upload_data' => $this->upload->data('image'));

        }
    }

}

这是我在视图中上传的表单：

<div id="container">
        <div class="col-md-12">
            <div class="row" id="image-preview">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12"> 
            <?PHP echo form_open_multipart(base_url('employees/upload/do_upload'),'class="form-horizontal" role="form" id="ajaximageupload"  ')?>
                  <div class="form-group">
                    <label for="inputPassword3" class="col-sm-5 control-label">Add Image</label>
                    <div class="col-sm-7">
                      <input type="file" class="" id="file" placeholder="" name="image">
                    </div>
                  </div>
                  <div class="form-group">
                  <label for="inputPassword3" class="col-sm-5 control-label"></label>
                    <div class="col-sm-7">
                      <input type="submit" name="upload" class="btn btn-primary" value="Upload" />
                    </div>
                  </div>
                </form>

                </div>
            </div>
            <div class="row">
                <div class="progress progress-striped active">
                  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
                  </div>
                </div>
            </div> 
        </div>
    </div>

非常感谢你!!!

Answer 1

这将通过ajax（无页面刷新）

提交表单

$(document).on("submit", "form", function(event)
{
    event.preventDefault();

    var url=$(this).attr("action");
    $.ajax({
        url: url,
        type: 'POST',            
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        }
    });
});

您可以查看此问题 Send FormData and String Data Together Through JQuery AJAX?

如何使用Codeigniter和jQuery Ajax实现文件上传？

1 个答案: