Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I'm using <a href="http://www.phpletter.com/our-projects/ajaxfileupload/" rel="nofollow">ajaxfileupload</a> plugin for this</p> <p><strong>HTML:</strong> </p> <pre><code> &lt;form method="post" action="" id="company_logo"&gt; &lt;input type="file" class="clsField" name="company_image" id="company_image"/&gt; &lt;input type="submit" name="submit" id="submit" /&gt; &lt;/form&gt; </code></pre> <p><strong>JS:</strong></p> <pre><code> $('#company_logo').submit(function(e) { e.preventDefault(); $.ajaxFileUpload({ url : '../users/uploadFile', secureuri :false, fileElementId :'company_image', dataType: 'json', data: {'name' : 'company-avatar'}, success : function (data, status) { // You have link to image inside data.file } }); return false; }); </code></pre> <p><strong>controller:</strong></p> <pre><code>/** * uploadFile - ajax response function for file upload * @param none - gets post * @return file url **/ public function uploadFile() { $input = $this-&gt;input-&gt;get_post('name'); if($input) { if($input == 'company-avatar') { echo json_encode(array('file' =&gt; $this-&gt;***_users_model-&gt;uploadFile($_FILES['company_image']))); } } } </code></pre> <p><strong>model:</strong></p> <pre><code>/** * uploadFile * @param $file - $_FILES array, $type - type of file to upload * @return path to file **/ public function uploadFile($file, $type = 'images') { $username = $this-&gt;session-&gt;userdata('username'); $fileName = $file['name']; $fileData = $file['tmp_name']; if(empty($file['name']) || empty($file['tmp_name'])) { return; } $fileDir = "your path"; $fileDir .= "/$type"; $filePath = "$fileDir/$fileName"; //Creating dir if doesn't exists. if (!file_exists($fileDir)) { mkdir($fileDir, 0777, true); } move_uploaded_file($fileData, $filePath); return $filePath; } </code></pre> <p>P.S. I don't know if my solution is good enough, but it's work for me, also please notice that ajaxFileUpload uses jQuery handleError that is deprecated so you should add this function:</p> <pre><code> handleError: function( s, xhr, status, e ) { // If a local callback was specified, fire it if ( s.error ) { s.error.call( s.context || window, xhr, status, e ); } // Fire the global callback if ( s.global ) { (s.context ? jQuery(s.context) : jQuery.event).trigger( "ajaxError", [xhr, s, e] ); } } </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload