title: jQuery Image Upload - CodeIgniter
body: <p>I use jQuery Image upload like this <a href="http://blueimp.github.com/jQuery-File-Upload/">http://blueimp.github.com/jQuery-File-Upload/</a></p>
  
  <p>I get the thumbnail and after clicking the upload button I get the progress bar, but then get 'SyntaxError: JSON.parse: unexpected character'</p>
  
  <p>view page</p>
  
  <pre><code>&lt;/body&gt;
  &lt;/html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;jQuery File Upload Demo&lt;/title&gt;
  
  &lt;link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css"&gt;
  &lt;link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-image-gallery.min.css"&gt;
  &lt;!--[if lt IE 7]&gt;&lt;link rel="stylesheet" href="http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-ie6.min.css"&gt;&lt;![endif]--&gt;
  &lt;link rel="stylesheet" href="http://blueimp.github.com/jQuery-File-Upload/jquery.fileupload-ui.css"&gt;
  &lt;style type="text/css"&gt;body {padding-top: 80px;}&lt;/style&gt;
  &lt;meta name="description" content="File Upload widget with multiple file selection, drag&amp;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."&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div class="container"&gt;
  
  
      &lt;?php echo form_open_multipart('upload/do_upload', array('id'=&gt;'fileupload')); ?&gt;
  
  
          &lt;div class="row"&gt;
              &lt;div class="span16 fileupload-buttonbar"&gt;
                  &lt;div class="progressbar fileupload-progressbar fade"&gt;&lt;div style="width:0%;"&gt;&lt;/div&gt;&lt;/div&gt;
                  &lt;span class="btn success fileinput-button"&gt;
                      &lt;span&gt;Add files...&lt;/span&gt;
                      &lt;input type="file" name="userfile[]" multiple&gt;
                  &lt;/span&gt;
                  &lt;button type="submit" class="btn primary start"&gt;Start upload&lt;/button&gt;
                  &lt;button type="reset" class="btn info cancel"&gt;Cancel upload&lt;/button&gt;
                  &lt;button type="button" class="btn danger delete"&gt;Delete selected&lt;/button&gt;
                  &lt;input type="checkbox" class="toggle"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;br&gt;
          &lt;div class="row"&gt;
              &lt;div class="span16"&gt;
                  &lt;table class="zebra-striped"&gt;&lt;tbody class="files"&gt;&lt;/tbody&gt;&lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  
  &lt;/div&gt;
  &lt;!-- gallery-loader is the loading animation container --&gt;
  &lt;div id="gallery-loader"&gt;&lt;/div&gt;
  &lt;!-- gallery-modal is the modal dialog used for the image gallery --&gt;
  &lt;div id="gallery-modal" class="modal hide fade"&gt;
      &lt;div class="modal-header"&gt;
          &lt;a href="#" class="close"&gt;&amp;times;&lt;/a&gt;
          &lt;h3 class="title"&gt;&lt;/h3&gt;
      &lt;/div&gt;
      &lt;div class="modal-body"&gt;&lt;/div&gt;
      &lt;div class="modal-footer"&gt;
          &lt;a class="btn primary next"&gt;Next&lt;/a&gt;
          &lt;a class="btn info prev"&gt;Previous&lt;/a&gt;
          &lt;a class="btn success download" target="_blank"&gt;Download&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
  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'
  };
  
  &lt;/script&gt;
  &lt;script id="template-upload" type="text/html"&gt;
  {% for (var i=0, files=o.files, l=files.length, file=files[0]; i&lt;l; file=files[++i]) { %}
      &lt;tr class="template-upload fade"&gt;
          &lt;td class="preview"&gt;&lt;span class="fade"&gt;&lt;/span&gt;&lt;/td&gt;
          &lt;td class="name"&gt;{%=file.name%}&lt;/td&gt;
          &lt;td class="size"&gt;{%=o.formatFileSize(file.size)%}&lt;/td&gt;
          {% if (file.error) { %}
              &lt;td class="error" colspan="2"&gt;&lt;span class="label important"&gt;Error&lt;/span&gt; {%=fileUploadErrors[file.error] || file.error%}&lt;/td&gt;
          {% } else if (o.files.valid &amp;&amp; !i) { %}
              &lt;td class="progress"&gt;&lt;div class="progressbar"&gt;&lt;div style="width:0%;"&gt;&lt;/div&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td class="start"&gt;{% if (!o.options.autoUpload) { %}&lt;button class="btn primary"&gt;Start&lt;/button&gt;{% } %}&lt;/td&gt;
          {% } else { %}
              &lt;td colspan="2"&gt;&lt;/td&gt;
          {% } %}
          &lt;td class="cancel"&gt;{% if (!i) { %}&lt;button class="btn info"&gt;Cancel&lt;/button&gt;{% } %}&lt;/td&gt;
      &lt;/tr&gt;
  {% } %}
  &lt;/script&gt;
  &lt;script id="template-download" type="text/html"&gt;
  {% for (var i=0, files=o.files, l=files.length, file=files[0]; i&lt;l; file=files[++i]) { %}
      &lt;tr class="template-download fade"&gt;
          {% if (file.error) { %}
              &lt;td&gt;&lt;/td&gt;
              &lt;td class="name"&gt;{%=file.name%}&lt;/td&gt;
              &lt;td class="size"&gt;{%=o.formatFileSize(file.size)%}&lt;/td&gt;
              &lt;td class="error" colspan="2"&gt;&lt;span class="label important"&gt;Error&lt;/span&gt; {%=fileUploadErrors[file.error] || file.error%}&lt;/td&gt;
          {% } else { %}
              &lt;td class="preview"&gt;{% if (file.thumbnail_url) { %}
                  &lt;a href="{%=file.url%}" title="{%=file.name%}" rel="gallery"&gt;&lt;img src="{%=file.thumbnail_url%}"&gt;&lt;/a&gt;
              {% } %}&lt;/td&gt;
              &lt;td class="name"&gt;
                  &lt;a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&amp;&amp;'gallery'%}"&gt;{%=file.name%}&lt;/a&gt;
              &lt;/td&gt;
              &lt;td class="size"&gt;{%=o.formatFileSize(file.size)%}&lt;/td&gt;
              &lt;td colspan="2"&gt;&lt;/td&gt;
          {% } %}
          &lt;td class="delete"&gt;
              &lt;button class="btn danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"&gt;Delete&lt;/button&gt;
              &lt;input type="checkbox" name="delete" value="1"&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  {% } %}
  &lt;/script&gt;
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --&gt;
  &lt;script src="http://blueimp.github.com/jQuery-File-Upload/vendor/jquery.ui.widget.js"&gt;&lt;/script&gt;
  &lt;!-- The Templates and Load Image plugins are included for the FileUpload user interface --&gt;
  &lt;script src="http://blueimp.github.com/JavaScript-Templates/tmpl.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js"&gt;&lt;/script&gt;
  &lt;!-- Bootstrap Modal and Image Gallery are not required, but included for the demo --&gt;
  &lt;script src="http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="http://blueimp.github.com/Bootstrap-Image-Gallery/bootstrap-image-gallery.min.js"&gt;&lt;/script&gt;
  &lt;!-- The Iframe Transport is required for browsers without support for XHR file uploads --&gt;
  &lt;script src="http://blueimp.github.com/jQuery-File-Upload/jquery.iframe-transport.js"&gt;&lt;/script&gt;
  &lt;script src="http://blueimp.github.com/jQuery-File-Upload/jquery.fileupload.js"&gt;&lt;/script&gt;
  &lt;script src="http://blueimp.github.com/jQuery-File-Upload/jquery.fileupload-ui.js"&gt;&lt;/script&gt;
  &lt;script src="http://blueimp.github.com/jQuery-File-Upload/application.js"&gt;&lt;/script&gt;
  &lt;!-- The XDomainRequest Transport is included for cross-domain file deletion for IE8+ --&gt;
  &lt;!--[if gte IE 8]&gt;&lt;script src="http://blueimp.github.com/jQuery-File-Upload/cors/jquery.xdr-transport.js"&gt;&lt;/script&gt;&lt;![endif]--&gt;
  
  
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>controller page:</p>
  
  <pre><code>class upload extends CI_Controller {
  
      function __construct()
      {
          parent::__construct();
          $this-&gt;load-&gt;helper(array('form', 'url'));
  
  
  
      }
  
      function index()
      {    
          $this-&gt;load-&gt;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-&gt;load-&gt;library('upload', $config);
          $this-&gt;load-&gt;library('Multi_upload');
  
          $files = $this-&gt;multi_upload-&gt;go_upload();
  
          if ( ! $files )        
          {
              $error = array('error' =&gt; $this-&gt;upload-&gt;display_errors());
              $this-&gt;load-&gt;view('index', $error);
          }    
          else
          {
              $data = array('upload_data' =&gt; $files);
              $this-&gt;load-&gt;view('upload_success', $data);
          }
      }    
  }
  </code></pre>
  
  <p>Any Help?</p>