Question

Buenos Días, tengo una ventana modal echa con jquery de bootstrap y en su cuerpo tengo este código(Trabajo con CodeIgniter):

 <!-- Modal de Foto de Portada-->
<?php $upportada =  array('name' => 'fportada', 'id'=> 'fportada'); ?>
    <div class="modal fade" id="FotoPortada" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content"> 
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">Subir Foto de Portada</h4>
          </div>
          <div class="modal-body">
            <div class="row">                   
                <?php echo form_open_multipart('') ?>
                <?php echo form_upload($upportada); ?>                      
                <?php echo form_close()?>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Salir</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" onmouseup="up_fotoportada()" >Save changes</button>
          </div>          
        </div>
      </div>
    </div>
    <!-- Fin de Subir Foto Modal -->

La idea es que en esa ventana el usuario pueda subir una foto para la portada de la noticia.
Codigo JS:

 function up_fotoportada(){
        var url = document.getElementById("fportada").value;
        ajax("1","fuentes","../../ajax/noticias/up_foto_portada?d="+url,true,"GET");
    }
function ajax(s,i,u,a,m){       
    /*  s - cadena de this.value
        i - id de la etiqueta a modificar por la respuesta del ajax
        u - url destino en busca de una respuesta
        a - Asyncrónico o no
        m - metodo GET o POST*/
    var con;
    if (s==""){
        document.getElementById(i).innerHTML="";
        return;
    }
    if (window.XMLHttpRequest){
    // code for IE7+, Firefox, Chrome, Opera, Safari
        con=new XMLHttpRequest();
    }else{
    // code for IE6, IE5
        con=new ActiveXObject("Microsoft.XMLHTTP");
    }
    con.onreadystatechange=function(){
        if (con.readyState==4 && con.status==200){
            document.getElementById(i).innerHTML=con.responseText;
        }
    }    
    con.open(m,u,a);
    con.send(); 
}

la funcion de subir el fichero en php es esta:
Código en php:

public function up_foto_portada()
    {               
        $config = array();
        $config["upload_path"] = "../WWW/images/portada/";
        $config["allowed_types"] = "gif|jpg|png";
        $config["max_size"] = "0";
        $config["max_width"] = "0";
        $config["max_height"] = "0";
        $config["remove_spaces"] = TRUE;

        $this->load->library('upload',$config);
        if(!$this->upload->do_upload()){
            $error = array('error' => $this->upload->display_errors());
        echo $error;
    }else{
        $data = array('upload_data' => $this->upload->data());
        echo "../WWW/images/portada/".@$data['file_name'];
        }
    }

En Resumen lo que quiero es que en un modal el usuario inserte una foto y el camino de esta foto luego de insertada en el servidor se muestre en una tab de mi web, pero no sube la imágen y no tengo idea.
Saludos Dairon

Answer 1

Ya que usas bootstrap te propongo usar una libreria que usa el mismo framework para lo que necesitas.

el códgo de tu modal queda así:

<link href="https://dl.dropboxusercontent.com/u/49447549/fileinputcdn/fileinput.min.css" rel="stylesheet">
<div class="modal fade" id="FotoPortada" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <?php echo form_open_multipart() ?>
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">Subir Foto de Portada</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <input id="portada" type="file" name="portada">
                    </div>
                </div>
                <div id="files" class="files"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Salir</button>
            </div>
            <?php echo form_close()?>
        </div>
    </div>
</div>

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#FotoPortada">
  Subir imagen
</button>
<script src="https://dl.dropboxusercontent.com/u/49447549/fileinputcdn/fileinput.min.js"></script>
<script>
$(document).ready(function(){

    $("#portada").fileinput({
        uploadUrl : '<?php echo base_url('/ajax/noticias/up_foto_portada/') ?>',
        allowedFileExtensions : ['jpg', 'png','gif'],
        maxFileSize: 2000,
        maxFilesNum: 1,
        uploadAsync: false,
        dropZoneEnabled : false
    });

    // callback cuando se subio la imagen correctamente
    $('#portada').on('fileuploaded', function(event, data, previewId, index) {

    });

    // callback cuando ocurrio un error al subir
    $('#portada').on('fileuploaderror', function(event, data, previewId, index) {

    });

});
</script>

recuerda usar los callbacks que comente en el código.

$('#input-id').on('fileuploaded', function(){}); Este lo usaras para cuando la imagen se haya subido.
$('#input-id').on('fileuploaderror', function(){}); Este lo usaras cuando ocurra un error al subirse

y en el lado del servidor:

public function up_foto_portada()
{
    $config = array();
    $config["upload_path"] = APPPATH . "uploads/";
    $config["allowed_types"] = "gif|jpg|png";
    $config["max_size"] = "2000";
    $config["remove_spaces"] = TRUE;

    $this->load->library('upload',$config);
    if(!$this->upload->do_upload('portada'))
    {
        $errors = array('error' => $this->upload->display_errors());
        die(json_encode($errors));
    }
    else
    {
        $data = array('upload_data' => $this->upload->data());
        die(json_encode(array('file' => $data['upload_data']['file_name'])));
    }
}

deberias tener algo asi:

---

demo:

https://jsfiddle.net/em4jo497/embedded/result/
http://jsfiddle.net/em4jo497/

---

dependencias:

https://code.jquery.com/
http://getbootstrap.com/javascript/#modals
http://plugins.krajee.com/file-input

Answer 2

Hola Dairón,

para subir archivos vía AJAX, no basta con enviar el valor de un INPUT de tipo FILE por GET, ya que la subida de archivos implica manejar datos multipart.

Actualmente para esto se usa el recurso de JavaScript FormData():

Te dejo acá un simple ejemplo de código en dónde se ve el uso de este recurso y cómo se trata al archivo a subir como un vector:

   var client = new XMLHttpRequest();

   function upload() {
      var file = document.getElementById("uploadfile"); // reemplazar "uploadfile" por el ID de tu INPUT de tipo FILE
      /* Create a FormData instance */
      var formData = new FormData();
      /* Add the file */ 
      formData.append("upload", file.files[0]);
      client.open("post", "/upload", true);
      client.setRequestHeader("Content-Type", "multipart/form-data");
      client.send(formData);  /* Send to server */ 
   }

   /* Check the response status */  
   client.onreadystatechange = function() {
      if (client.readyState == 4 && client.status == 200) {
         alert(client.statusText);
      }
   }

Acá un enlace sobre FormData() y su uso: https://developer.mozilla.org/es/docs/Web/Guide/Usando_Objetos_FormData

Saludos!