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; 
    } 
} 

< --View ->

<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, но мне действительно нужна помощь. Прошло уже два дня, когда я на нем!

Благодарим за помощь.

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> 

< - CONTROLLER ->

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

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, вам понадобятся средства для просмотра результата отладки, например, печать результата отладки echo'ed на элемент HTML на вашей вызывающей странице. Вы также можете распечатать iformation с помощью инструмента, такого как Firebug.

Answer 3

Без кода Javascript для вас мало кто может сделать.

Отъезд this tutorial on Nettuts+, который углубляется в основную идею, что вам нужно, чтобы вы лучше понимали, отлаживали и настраивали свой код.

Кроме того, я едва использую плагины jQuery, так как мне легче кодировать код, который лучше подходит для потребностей моего текущего проекта, поэтому я не могу рекомендовать его.