如何使用jquery向codeigniter控制器提交文件

Question

我可以请求你的帮助！

我想上传一个文件，并使用jquery将所有数据传递给codeigniter控制器。

我的视图文件：

<div class="form-group"> 
    <label class="col-md-4 control-label">Item Image</label> 
    <div class="col-md-8"> 
     <input class="form-control" type="file" placeholder="" id="itemImage" name="itemImage" data-parsley-required="true" /> 
    </div> 
</div> 
<button type="button" onclick="add_item();">Sumit</button> 
<script> 
function add_item(){ 
    $.post('<?php echo site_url('admin_newitem/add_item'); ?>', 
     { 
      itemId   : $('#itemId').val(), 
      itemImage  : $('#itemImage').val() 
     }, 
     function(data){ 
       if(data.result=='SUCCESS'){ 
       $('#itemId').val(''); 
       $('#itemImage').val(''); 
        //show success 

        }else{ 
        //show error 
        } 
      },'json' 
     ); 
    } 
</script> 

我的控制器：

function add_item(){ 
    $this->output->set_status_header(200); 
    $this->output->set_header('Content-Type: application/json'); 
    $itemId   = $this->input->post('itemId'); 
    $itemImage  = $this->input->post('itemImage');; 
    $config['upload_path'] = realpath(APPPATH.'../assets_main/img/item/'); 
    $config['allowed_types'] = 'jpg|jpeg'; 
    $config['max_size'] = '100'; 
    $config['max_width'] = '200'; 
    $config['max_height'] = '200'; 
    $file_name = $config['file_name'] = md5(uniqid(mt_rand())); 
    $config['remove_spaces'] = TRUE; 
    $this->load->library('upload', $config); 
    if(!$itemImage){ 
     $jdata['result'] = "FAILED"; 
     $jdata['message'] = "upload error."; 
     $jdata['field'] = "itemImage"; 
     echo json_encode($jdata); 
     exit(); 
    } 
    $data = array('upload_data' => $this->upload->data()); 
    $jdata['message'] = "Thank you for purchasing our item!"; 
    $jdata['result'] = "SUCCESS";     
    echo json_encode($jdata); 
    exit(); 
} 

我能拿到项目Id和ItemImage但是当我检查该图像是假设所在的文件夹，它不在那里。我想我无法捕捉到真实的文件，那么，我有办法完成这个任务吗？

Answer 1

按照你的建议，我相信你忘记真正做到上传，代码点火器文档可能帮助：

http://www.codeigniter.com/user_guide/libraries/file_uploading.html

有了这个正确实施，我觉得你的代码应类似于东西：

function add_item(){ 
    $this->output->set_status_header(200); 
    $this->output->set_header('Content-Type: application/json'); 
    $itemId   = $this->input->post('itemId'); 
    $itemImage  = $this->input->post('itemImage');; 
    $config['upload_path'] = realpath(APPPATH.'../assets_main/img/item/'); 
    $config['allowed_types'] = 'jpg|jpeg'; 
    $config['max_size'] = '100'; 
    $config['max_width'] = '200'; 
    $config['max_height'] = '200'; 
    $file_name = $config['file_name'] = md5(uniqid(mt_rand())); 
    $config['remove_spaces'] = TRUE; 
    $this->load->library('upload', $config); 


    //THE MISSING LINE 
    if($this->upload->do_upload()){ 
     //THE FILE HAS NOW BEEN UPLOADED 
     $data = array('upload_data' => $this->upload->data()); 
     $jdata['message'] = "Thank you for purchasing our item!"; 
     $jdata['result'] = "SUCCESS";     
     echo json_encode($jdata); 
     exit(); 
    }else{ 
     //NO FILE UPLOADED 
     $jdata['result'] = "FAILED"; 
     $jdata['message'] = "upload error."; 
     $jdata['field'] = "itemImage"; 
     echo json_encode($jdata); 
     exit(); 
    } 


} 

Answer 2

我的初步想法，已经使用CI和试图做同样的事情，是你不能没有特殊的插件，通过AJAX做文件上传这样的代码：

http://malsup.com/jquery/form/

具体来说，此文件上传部分：

http://malsup.com/jquery/form/#file-upload

只是试图发送一个文件输入将无法正常工作的VAL后，我不相信 - 但也许更现代浏览器现在能够处理这些问题。