使用带有Ajax和FormData的Codeigniter上传图像

Question

我喜欢在PHP中使用Codeigniter Framework和JQuery
AJAX上传图像，而无需重定向页面。当我上传图像时，它重定向到控制器区域，并且值未插入数据库，ajax响应也不会出现，

任何人都可以解决我的问题吗？

这是我的视野。

<form  action="<?php echo site_url("Admin_Creator/do_upload")?>" enctype="multipart/form-data" accept-charset="utf-8" name="formname" id="frm_imageuupload"  method="post">
               <div class="form-group">
               <label for="menu">Select Menu</label>
                   <select class="form-control" id="selectmenuid">
                    <option value="">-- Select Menu --</option>
                    <?php foreach($showData as $show):?>
                      <option value="<?php echo $show->menu_id?>"><?php echo $show->menu_name?></option>
                    <?php endforeach;?>
                    </select>
                </div>
               <div class="form-group">
               <label for="menu">Select Sub Menu</label>
                   <select class="form-control" id="selectsubmenu">
                       <option>--Select Sub Menu--</option>
                    </select>
               </div>
              <div class="form-group">
                  <label for="imagetitle">Image Title</label>
                  <input type="text" class="form-control" name="imagetitle" id="imagetitle" placeholder="Enter Image Title" required="required">
                </div>
               <div class="control-group form-group">
                        <div class="controls">
                            <label>Upload Photo:</label>
                            <input name="file" type="file" id="image_file" required>
                            <p class="help-block"></p>
                        </div>
               </div>
               <button type="submit" class="btn btn-primary" id="submit">Submit</button>
           </form>

这是我的Ajax编码

$('#submit').on('click',function(){
        var inputFile=$('input[name=file]');
        var fileToUpload=inputFile[0].files[0];
        var other_data = $('#frm_imageuupload').serializeArray();
        var formdata=new FormData();
        formdata.append(fileToUpload);
        formdata.append(other_data);
         //now upload the file using ajax
         $.ajax({
             url:"<?php echo base_url('Admin_Creator/do_upload') ?>",
             type:"post",
             data:formdata,
             processData:false,
             contentType:false,
              success: function(data){
            if (data== 'true'){   
               window.location.reload();
            }
            else{
               alert("Pls Try Again");
            }
           }
         });

这是我的控制器编码…

 public function do_upload(){
        $config['upload_path']="./upload";
        $config['allowed_types']='gif|jpg|png';
        $this->load->library('upload',$config);
        if($this->upload->do_upload()){
        $data = array('upload_data' => $this->upload->data());
        $data1 = array(
        'menu_id' => $this->input->post('selectmenuid'),
        'submenu_id' => $this->input->post('selectsubmenu'),
        'imagetitle' => $this->input->post('imagetitle'),
        'imgpath' => $data['upload_data']['file_name']
        );  
        $result= $this->Admin_model->save_imagepath($data1);
        if ($result == TRUE) {
            echo "true";
        }
        }

     }

这是我的模型编码

public function save_imagepath($data1)
    {
        $this->db->insert('images', $data1);
         return $this->db->insert_id();
    }

Answer 1

试试这个。 工作正常
-HTML表单-

<form enctype="multipart/form-data" id="submit">
               <div class="form-group">
               <label for="menu">Select Menu</label>
                   <select class="form-control" name="selectmenuid" id="selectmenuid">
                    <option value="">-- Select Menu --</option>
                    <?php foreach($showData as $show):?>
                      <option value="<?php echo $show->menu_id?>"><?php echo $show->menu_name?></option>
                    <?php endforeach;?>
                    </select>
                </div>
               <div class="form-group">
               <label for="menu">Select Sub Menu</label>
                   <select class="form-control" name="selectsubmenu" id="selectsubmenu">
                       <option>--Select Sub Menu--</option>
                    </select>
               </div>
              <div class="form-group">
                  <label for="imagetitle">Image Title</label>
                  <input type="text" class="form-control" name="imagetitle" id="imagetitle" placeholder="Enter Image Title" required="required">
                </div>
               <div class="control-group form-group">
                        <div class="controls">
                            <label>Upload Photo:</label>
                            <input name="file" type="file"  id="image_file" required>
                            <p class="help-block"></p>
                        </div>
               </div>
               <button type="submit" class="btn btn-primary" id="sub">Submit</button>
           </form>

阿贾克斯-

$('#submit').submit(function(e){
    e.preventDefault(); 
         $.ajax({
             url:'Your path',
             type:"post",
             data:new FormData(this),
             processData:false,
             contentType:false,
             cache:false,
             async:false,
              success: function(data){
                  alert(data);
           }
         });
    });

只需在ajax中设置url，即可完美运行。
控制器功能-

public function do_upload(){
        $config['upload_path']="./upload";
        $config['allowed_types']='gif|jpg|png';
        $this->load->library('upload',$config);
        if($this->upload->do_upload("file")){
        $data = array('upload_data' => $this->upload->data());
        $data1 = array(
        'menu_id' => $this->input->post('selectmenuid'),
        'submenu_id' => $this->input->post('selectsubmenu'),
        'imagetitle' => $this->input->post('imagetitle'),
        'imgpath' => $data['upload_data']['file_name']
        );  
        $result= $this->Admin_model->save_imagepath($data1);
        if ($result == TRUE) {
            echo "true";
        }
        }

     }