jQuery imagen Subir - CodeIgniter - Excelente biblioteca

utilizo jQuery Carga de imágenes como esta http://blueimp.github.com/jQuery-File-Upload/jQuery imagen Subir - CodeIgniter

consigo la miniatura y tras pulsar el botón de carga consigo la barra de progreso, pero entonces el mensaje 'SyntaxError: JSON.parse: carácter inesperado'

vista de página página

</body> 
</html> 
<head> 
<meta charset="utf-8"> 
<title>jQuery File Upload Demo</title> 

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"> 
<link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-image-gallery.min.css"> 
<!--[if lt IE 7]><link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-ie6.min.css"><![endif]--> 
<link rel="stylesheet" href="http://blueimp.github.com/jQuery-File-Upload/jquery.fileupload-ui.css"> 
<style type="text/css">body {padding-top: 80px;}</style> 
<meta name="description" content="File Upload widget with multiple file selection, drag&amp;drop support, progress bar and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads. Works with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads."> 
</head> 
<body> 

<div class="container"> 


    <?php echo form_open_multipart('upload/do_upload', array('id'=>'fileupload')); ?> 


     <div class="row"> 
      <div class="span16 fileupload-buttonbar"> 
       <div class="progressbar fileupload-progressbar fade"><div style="width:0%;"></div></div> 
       <span class="btn success fileinput-button"> 
        <span>Add files...</span> 
        <input type="file" name="userfile[]" multiple> 
       </span> 
       <button type="submit" class="btn primary start">Start upload</button> 
       <button type="reset" class="btn info cancel">Cancel upload</button> 
       <button type="button" class="btn danger delete">Delete selected</button> 
       <input type="checkbox" class="toggle"> 
      </div> 
     </div> 
     <br> 
     <div class="row"> 
      <div class="span16"> 
       <table class="zebra-striped"><tbody class="files"></tbody></table> 
      </div> 
     </div> 
    </form> 

</div> 
<!-- gallery-loader is the loading animation container --> 
<div id="gallery-loader"></div> 
<!-- gallery-modal is the modal dialog used for the image gallery --> 
<div id="gallery-modal" class="modal hide fade"> 
    <div class="modal-header"> 
     <a href="#" class="close">&times;</a> 
     <h3 class="title"></h3> 
    </div> 
    <div class="modal-body"></div> 
    <div class="modal-footer"> 
     <a class="btn primary next">Next</a> 
     <a class="btn info prev">Previous</a> 
     <a class="btn success download" target="_blank">Download</a> 
    </div> 
</div> 
<script> 
var fileUploadErrors = { 
    maxFileSize: 'File is too big', 
    minFileSize: 'File is too small', 
    acceptFileTypes: 'Filetype not allowed', 
    maxNumberOfFiles: 'Max number of files exceeded', 
    uploadedBytes: 'Uploaded bytes exceed file size', 
    emptyResult: 'Empty file upload result' 
}; 

</script> 
<script id="template-upload" type="text/html"> 
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %} 
    <tr class="template-upload fade"> 
     <td class="preview"><span class="fade"></span></td> 
     <td class="name">{%=file.name%}</td> 
     <td class="size">{%=o.formatFileSize(file.size)%}</td> 
     {% if (file.error) { %} 
      <td class="error" colspan="2"><span class="label important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td> 
     {% } else if (o.files.valid && !i) { %} 
      <td class="progress"><div class="progressbar"><div style="width:0%;"></div></div></td> 
      <td class="start">{% if (!o.options.autoUpload) { %}<button class="btn primary">Start</button>{% } %}</td> 
     {% } else { %} 
      <td colspan="2"></td> 
     {% } %} 
     <td class="cancel">{% if (!i) { %}<button class="btn info">Cancel</button>{% } %}</td> 
    </tr> 
{% } %} 
</script> 
<script id="template-download" type="text/html"> 
{% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %} 
    <tr class="template-download fade"> 
     {% if (file.error) { %} 
      <td></td> 
      <td class="name">{%=file.name%}</td> 
      <td class="size">{%=o.formatFileSize(file.size)%}</td> 
      <td class="error" colspan="2"><span class="label important">Error</span> {%=fileUploadErrors[file.error] || file.error%}</td> 
     {% } else { %} 
      <td class="preview">{% if (file.thumbnail_url) { %} 
       <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery"><img src="{%=file.thumbnail_url%}"></a> 
      {% } %}</td> 
      <td class="name"> 
       <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}">{%=file.name%}</a> 
      </td> 
      <td class="size">{%=o.formatFileSize(file.size)%}</td> 
      <td colspan="2"></td> 
     {% } %} 
     <td class="delete"> 
      <button class="btn danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">Delete</button> 
      <input type="checkbox" name="delete" value="1"> 
     </td> 
    </tr> 
{% } %} 
</script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --> 
<script src="http://blueimp.github.com/jQuery-File-Upload/vendor/jquery.ui.widget.js"></script> 
<!-- The Templates and Load Image plugins are included for the FileUpload user interface --> 
<script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script> 
<script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"></script> 
<!-- Bootstrap Modal and Image Gallery are not required, but included for the demo --> 
<script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.min.js"></script> 

<script src="http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-image-gallery.min.js"></script> 
<!-- The Iframe Transport is required for browsers without support for XHR file uploads --> 
<script src="http://blueimp.github.com/jQuery-File-Upload/jquery.iframe-transport.js"></script> 
<script src="http://blueimp.github.com/jQuery-File-Upload/jquery.fileupload.js"></script> 
<script src="http://blueimp.github.com/jQuery-File-Upload/jquery.fileupload-ui.js"></script> 
<script src="http://blueimp.github.com/jQuery-File-Upload/application.js"></script> 
<!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ --> 
<!--[if gte IE 8]><script src="http://blueimp.github.com/jQuery-File-Upload/cors/jquery.xdr-transport.js"></script><![endif]--> 


</body> 
</html>

controlador:

class upload extends CI_Controller { 

    function __construct() 
    { 
     parent::__construct(); 
     $this->load->helper(array('form', 'url')); 



    } 

    function index() 
    {  
     $this->load->view('index'); 
    } 

    function do_upload() 
    { 
     $config['upload_path'] = './uploads/'; // server directory 
     $config['allowed_types'] = 'gif|jpg|png'; // by extension, will check for whether it is an image 
     $config['max_size'] = '1000'; // in kb 
     $config['max_width'] = '1024'; 
     $config['max_height'] = '768'; 

     $this->load->library('upload', $config); 
     $this->load->library('Multi_upload'); 

     $files = $this->multi_upload->go_upload(); 

     if (! $files)   
     { 
      $error = array('error' => $this->upload->display_errors()); 
      $this->load->view('index', $error); 
     }  
     else 
     { 
      $data = array('upload_data' => $files); 
      $this->load->view('upload_success', $data); 
     } 
    }  
}

¿Alguna ayuda?

Fuente

2012-01-31 Laky

Comprobar: https://github.com/blueimp/jQuery-File-Upload/issues/ 517 Parece un problema común. – Marcus

Gracias, pero ¿dónde debería poner este código desde la última publicación? Cuando puse __construct() obtengo un error: Mensaje: Propiedad indefinida: upload :: $ _ request – Laky

En github, la publicación menciona poner el código justo al comienzo de la acción, así que supongo que en tu función do_upload. No puedo probarme ahora mismo, lo siento =/ – Marcus

Bueno, para empezar, ninguno de los archivos de comandos que se hace referencia en la parte inferior de la su punto de vista existen:

Esto se mostraría en su consola web. Trate de vigilarlo todo el tiempo.

Diríjase a This GitHub Page y siga las instrucciones para obtener esto en funcionamiento con CodeIgniter.

Fuente

2012-02-14 07:09:47

También recibí este error incluso cuando los archivos se cargaban correctamente. El problema que encontré fue lo que estaba devolviendo. Más información se puede encontrar aquí https://github.com/blueimp/jQuery-File-Upload/wiki/Setup y la sección etiquetada Usando jQuery Carga de archivos (versión IU) con una del lado del servidor controlador de carga a medida

por lo que básicamente dice: "Tenga en cuenta que la respuesta debe ser siempre un objeto JSON que contiene una matriz de archivos, incluso si solo se carga un archivo ". Aún debe pasar una matriz de archivos de regreso incluso si recibe un error del lado del servidor.

Aquí es un ejemplo de mi función de carga (las teclas de piezas son los "eco json_encode"):

function upload_file($component_files_id = null,$thumb_width = 400) 
{ 
    $config['upload_path'] = ($component_files_id) ? './documents/component_files/'.$component_files_id : './documents/image_uploads'; 
    if (!file_exists($config['upload_path'])) 
     @mkdir($config['upload_path'], 0777, true); 

    $config['allowed_types'] = 'gif|jpg|png|pdf|doc|docx|docm|odt|xls|xlsx|xlsm|ods|csv'; 
    $config['max_size'] = '10000'; #in KB 
    $config['max_width'] = '5000'; 
    $config['max_height'] = '5000'; 

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

     if(is_ajax()){ 
      $file['error'] = $error; 
      echo json_encode(array('files'=>array($file))); 
     } 
     else 
      set_message($error,'error',true); 
    } 
    else 
    { 
     $file = $this->upload->data(); 
     $file['is_image'] = ($file['is_image'] == '1') ? 'TRUE' : 'FALSE'; 
     $file['updated_by'] = get_user('user_id'); 
     $file['created_by'] = get_user('user_id'); 
     if($component_files_id) 
      $file['component_files_id'] = $component_files_id; 
     //save the file details to the database 
     $file_id = $this->page_model->save_file($file); 
     if($file['is_image'] == 'TRUE'){  
      $thumb_width = ($component_files_id) ? 290 : $thumb_width; 
      $this->_create_thumbnail($file_id,$thumb_width); 
     } 
     //set the data for the json array 
     $info->id = $file_id; 
     $info->name = $file['file_name']; 
     $info->size = $file['file_size']; 
     $info->type = $file['file_type']; 
     if($file['is_image'] == 'TRUE'){ 
      $info->url = base_url().'files/image/'.$file_id; 
      $info->thumbnail_url = base_url().'files/image/'.$file_id.'/thumb'; 
     } 
     else{ 
      $info->url = base_url().'files/download/'.$file_id; 
      $info->thumbnail_url = base_url().'images/document-icon.png';    
     }    

     $info->delete_url = base_url().'files/delete_document/'.$file_id; 
     $info->delete_type = 'DELETE'; 
     $files['files'] = array($info); 
     header('Content-type: text/html'); 
     echo json_encode($files); 
    } 
}

Fuente

2013-02-19 02:43:54

jQuery imagen Subir - CodeIgniter

Respuesta

Cuestiones relacionadas