如何使用 Ajax 以一种形式的 CI 上传带有数据的图像

Question

我创建了一个用于添加广告的表单，您可以在其中输入一些文本输入，然后在它们下方添加一个添加照片的地方，如果它只是添加照片而不重新加载页面 - 它有效，我只是选择了照片并发送了一键完成整个表单，将照片上传到服务器，然后我将照片名称添加到数据库中。但我希望这个表单更有用，并在发送整个表单之前预览这些照片，所以我添加了 Ajax 脚本。问题是当您选择照片并将它们上传到服务器时，我不知道如何将它们传输到主窗体。

我尝试在上传函数末尾添加$this->create($photos)，并在创建函数中提取它们。我把它们传给了他们，但是一旦 Ajax 在他上传第一页时重新加载了它。当我填写表单的文本字段并按发送表单时，$ photos 为 NULL，我不知道如何将这些数据传输并保存在数据库中？你是如何让它发挥作用的？

public function create()
    {

        if ( !empty( $_POST ) )
        {

            if ( $this->form_validation->run( 'site_ads_create' ) == true )
            {
                $activate_code = random_string();

                if ( logged_in() == true ) 
                {
                $data = array(
                    'title' => $this->input->post( 'title' , true ),
                    'description' => $this->input->post( 'description' , true ),
                    'category_id' => $this->input->post( 'subcat' , true ),
                    'city_id' => $this->input->post( 'city_id' , true ),
                    'price' => $this->input->post( 'price' , true ),
                    'contact' => $this->input->post( 'contact' , true ),
                    'email' => $this->session->userdata( 'email' ),
                    'phone' => $this->input->post( 'phone' , true ),
                    'user_ip' => getUserIpAddr(),
                    'created' => time(),
                    'active' => 1,



                );

                }
                else
                {
                $data = array(
                    'title' => $this->input->post( 'title' , true ),
                    'description' => $this->input->post( 'description' , true ),
                    'category_id' => $this->input->post( 'subcat' , true ),
                    'city_id' => $this->input->post( 'city_id' , true ),
                    'price' => $this->input->post( 'price' , true ),
                    'contact' => $this->input->post( 'contact' , true ),
                    'email' => $this->input->post( 'email' , true ),
                    'phone' => $this->input->post( 'phone' , true ),
                    'user_ip' => getUserIpAddr(),
                    'created' => time(),
                    'active' => 0,
                    'activate_code' => $activate_code,


                );  

                }

                $add = $this->Site_model->create( 'ads' , $data );

                $this->session->set_flashdata( 'alert' , 'Ogłoszenie zostało dodane.' );
                //redirect( '/dodaj-ogloszenie' );

            }
            else
            {
                $this->session->set_flashdata( 'alert' , validation_errors() );
                //refresh();
            }

        }

        $data['cities'] = $this->Site_model->get_cities('cities', 'name', 'asc');
        $data['categories'] = $this->Site_model->get_categories();
        $this->load->view( 'create' , $data );

    }

上传功能

public function upload()
    {

if($_FILES["files"]["name"] != '')
  {
   $output = '';

        $path = BASEPATH . '../images/'. date('y').'_'.date('m').'/';

        if ( !file_exists( $path ) )
                {
                    mkdir( $path , 0777 );
                }

   $config['upload_path'] = 'images/'. date('y').'_'.date('m').'/'; 
   $config["allowed_types"] = 'gif|jpg|png';
   $this->load->library('upload', $config);
   $this->upload->initialize($config);
   for($count = 0; $count<count($_FILES["files"]["name"]); $count++)
   {
    $_FILES["file"]["name"] = $_FILES["files"]["name"][$count];
    $_FILES["file"]["type"] = $_FILES["files"]["type"][$count];
    $_FILES["file"]["tmp_name"] = $_FILES["files"]["tmp_name"][$count];
    $_FILES["file"]["error"] = $_FILES["files"]["error"][$count];
    $_FILES["file"]["size"] = $_FILES["files"]["size"][$count];
    if($this->upload->do_upload('file'))
    {
     $data = $this->upload->data();
     $output .= '
     <div class="col-md-3">
      <img src="'.base_url().'images/'. date('y').'_'.date('m').'/'.$data["file_name"].'" class="img-responsive img-thumbnail" />
     </div>
     ';
     $photos[] = $this->upload->data();
    }
   }
   echo $output;   
  }
}

和一个带有 ajax 脚本的表单

<form method='post' action='<?php echo base_url();?>ads/create' enctype='multipart/form-data'>

...

<div class="container">
 <br /><br /><br />
 <h3 align="center">Upload Multiple Files in Codeigniter using Ajax JQuery</h3><br />

 <div class="col-md-6" align="right">
  <label>Select Multiple Files</label>
 </div>
 <div class="col-md-6">
  <input type="file" name="files" id="files" multiple />
 </div>
 <div style="clear:both"></div>
 <br />
 <br />
 <div id="uploaded_images"></div>
</div>

<script>
$(document).ready(function(){
 $('#files').change(function(){
  var files = $('#files')[0].files;
  var error = '';
  var form_data = new FormData();
  for(var count = 0; count<files.length; count++)
  {
   var name = files[count].name;
   var extension = name.split('.').pop().toLowerCase();
   if(jQuery.inArray(extension, ['gif','png','jpg','jpeg']) == -1)
   {
    error += "Invalid " + count + " Image File"
   }
   else
   {
    form_data.append("files[]", files[count]);
   }
  }
  if(error == '')
  {
   $.ajax({
    url:"<?php echo base_url(); ?>ads/upload", 
    method:"POST",
    data:form_data,
    contentType:false,
    cache:false,
    processData:false,
    beforeSend:function()
    {
     $('#uploaded_images').html("<label class='text-success'>Uploading...</label>");
    },
    success:function(data)
    {
     $('#uploaded_images').html(data);
     $('#files').val('');
    }
   })
  }
  else
  {
   alert(error);
  }
 });
});
</script>

  <?php echo form_close(); ?>

Answer 1

如果您想在上传前预览图像，请使用 FileReader 来执行此操作。这是代码，

 function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

//imgInp is ID form upload file
$("#imgInp").change(function(){
    readURL(this);
});