Codeigniter Ajax上传图片

Question

我目前正在使用CodeIgniter开发一些用于我的学校项目的表单。

这个想法是，我有一个图像上传的形式。我试图用Ajax动态执行它，但它似乎根本不工作。我试图用php的非动态版本，它完美的作品，我的图像在我的文件夹，我没有问题。

我试过5或6个没有结果的插件，这当然是我的错，但我不知道我在哪里犯了错误。

< ---控制器--->

if($result = $this->images_model->add_bdd()) 
{ 
    $data['uploaded'] = $result; 
    $data['message_upload'] = 'Image uploader avec succès.';        
    $this->template->set_title('Upload successful'); 
    $this->template->view('add_places',$data); 
} 
else 
{ 
    $this->template->set_title('Upload failed'); 
    $this->template->view('add_places'); 
} 

< --model - >

function add_bdd() 
{ 
    $config = array(
       'allowed_types' => 'jpg|jpeg|tiff', 
       'upload_path' => $this->gallery_path, 
       'max_size' => 2000, 
       'remove_spaces' => TRUE, 
       'overwrite' => FALSE 
      ); 

    $this->load->library('upload',$config); 
    if ($this->upload->do_upload()) 
    { 

     $data_img = $this->upload->data(); 
     $exif = $this->exif_extractor->coords($data_img['full_path']); 
     $data = array(
       'titre' => 'titlecontent', 
       'url' => base_url('images/'.$data_img['file_name']), 
       'url_min' => base_url('images/'.$data_img['raw_name'].'_min'.$data_img['file_ext']), 
       'alt' => 'cover_contentName', 
       'id_users' => $this->session->userdata('id'), 
       'date_upload' => date('Y-m-d H:m'), 
       'date_modified' => date('Y-m-d H:m'), 
       'lat' => $exif[0], 
       'long' => $exif[1], 
       ); 
     $this->db->insert('pictures',$data); 
     return $exif; 
    } 
    else 
    { 
     return false; 
    } 
} 

< - 查看 - >

<form action="http://localhost:8888/project/images/add" method="post" accept-charset="utf-8" enctype="multipart/form-data"> 
<input type="file" name="userfile" value="Image de couverture" /> 
<button name="upload" type="button" id="upload">Upload</button> 
<input type="submit" name="submit" value="Publish Place" /> 
</form> 

任何人都可以给我一个jQuery插件来动态上传图片并发送回脚本我的图片机智h我想返回的路径和其他数据？

我无法像我为jQuery所做的所有代码一样粘贴，但我真的需要帮助。我已经2天了！

感谢您的帮助。

Answer 1

感谢您的帮助，我现在改变了我关于剧本的动态，它完全符合我所要做的。

有脚本我上传系统：

< - VIEW（upload_img） - >

<div id="container"> 
<div id="filelist"></div> 
<a href="http://localhost:8888/myproject/#" id="userfile" name="userfile">[Select files]  </a>  
<a href="http://localhost:8888/myproject/images/index#" id="uploadfiles">[Upload files]</a 
</div> 

< - 控制器 - >

function index(){ 
    if($this->_access()) 
    { 
     $this->template->add_include('js/jquery.js') 
         ->add_include('js/browserplus.js') 
         ->add_include('js/plugins/plupload/plupload.full.js') 
         ->add_include('js/imgfunc.js'); 
     $this->template->view('upload_img'); 
    } 
    else 
    { 
     redirect(site_url()); 
    } 
} 

function upload_image_spot() 
{ 
    if($query = $this->images_model->upload_image_spot()) 
    { 
     echo json_encode($query); 
    } 
    else 
    { 
     echo $this->upload->display_errors('', ''); 
    } 
} 

< - - 型号 - >

function upload_image_spot() 
{ 
    $config['upload_path'] = realpath(APPPATH. '../images/spots'); 
    $config['allowed_types'] = 'jpg|jpeg|tiff|png'; 
    $config['max_size'] = 3062; 
    $config['encrypt_name'] = TRUE; 
    $this->load->library('upload', $config); 
    if($this->upload->do_upload('file')) 
    // file means the file send to the website for upload, this is the name of field for Plupload script 
    { 
    $data_img = $this->upload->data(); 
    $copies = array(
      array('dir' => 'images/spots/large/', 'x' => 1000, 'y' => 600), 
      array('dir' => 'images/spots/thumb/', 'x' => 100, 'y' => 60) 
    ); 

    $this->copies($data_img,$copies); 

    return 'whatever'; // Not real data, I don't wanna post them here 
    } 
} 

< - JS-脚本 - >

首先包括：

-jQuery

-browserPlus

-Plupload

（Plupload Script）

现在将这个脚本添加到一个空文件中：

var uploader = new plupload.Uploader({ 
    runtimes : 'gears,html5,flash,silverlight,browserplus', 
    browse_button : 'userfile', 
    container : 'container', 
    max_file_size : '3mb', 
    url : 'yourUploadFunctionCI', 
    flash_swf_url : 'plugins/plupload/js/plupload.flash.swf', 
    silverlight_xap_url : 'plugins/plupload/js/plupload.silverlight.xap', 
    filters : [ 
     {title : "Image files", extensions : "jpg,jpeg,JPG,JPEG,tiff,png"}, 
    ] 
}); 

uploader.bind('Init', function(up, params) { 
}); 

$('#uploadfiles').click(function(e) { 
    uploader.start(); 
    e.preventDefault(); 
}); 

uploader.init(); 

uploader.bind('FilesAdded', function(up, files) { 
    $.each(files, function(i, file) { 
     $('#filelist').html(""); 
     $('#filelist').append(
      '<div id="' + file.id + '">' + 
      file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' + 
     '</div>'); 
    }); 

    up.refresh(); 
}); 

uploader.bind('UploadProgress', function(up, file) { 
    $('#' + file.id + " b").html(file.percent + "%"); 
}); 

uploader.bind('Error', function(up, err, msg,file) { 
    $('#filelist').append("<div>Error: " + err.code + 
     ", Message: " + err.message + 
     (err.file ? ", File: " + err.file.name : "") + 
     "</div>" 
    ); 
    console.log(msg,up,err); 
    up.refresh(); 
}); 

uploader.bind('FileUploaded', function(up, file,response) { 
    $('#' + file.id + " b").html("100%"); 
    var data = jQuery.parseJSON(msg.response); 
    console.log(data); 
}); 

做你自己的定制，就是这样，无需额外的脚本，就像你可以在网站上看到类似复制/粘贴从一个PHP文件到控制器的所有文字，只要加入“文件”里do_upload，一切的要去做工精细！

有一个美好的一天家伙，希望它的帮助。

Simon Simon

Answer 2

add_bdd（）函数是否返回false？

我已经使用CodeIgnitor来做这件事情，我发现你指定的过滤器通常是为什么你没有上传文件。你应该添加更多的代码到if ($this->upload->do_upload())是假的部分，并使用以下打印出调试代码：

echo $this->upload->display_errors(); 

这里看到更多的信息：http://codeigniter.com/user_guide/libraries/file_uploading.html

请记住，如果要调用此通过AJAX，您将需要一种方法来查看调试结果，例如将回显的调试结果打印到呼叫页面上的HTML元素。你也可以使用像Firebug这样的工具打印iformation。

Answer 3

没有Javascript代码，几乎没有人可以为你做。

检查出this tutorial on Nettuts+深入了解后面的基本概念，以便更好地理解，调试和调整代码。

此外，我几乎没有使用jQuery插件，因为我发现它更容易编码，更适合我当前项目的需求，所以我不能推荐任何。