file_uploading.html 15.8 KB
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 433 434 435 436 437 438 439 440 441 442 443 444 445 446 447 448 449 450 451
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>File Uploading Class : CodeIgniter User Guide</title>

<style type='text/css' media='all'>@import url('../userguide.css');</style>
<link rel='stylesheet' type='text/css' media='all' href='../userguide.css' />

<script type="text/javascript" src="../nav/nav.js"></script>
<script type="text/javascript" src="../nav/prototype.lite.js"></script>
<script type="text/javascript" src="../nav/moo.fx.js"></script>
<script type="text/javascript" src="../nav/user_guide_menu.js"></script>

<meta http-equiv='expires' content='-1' />
<meta http-equiv= 'pragma' content='no-cache' />
<meta name='robots' content='all' />
<meta name='author' content='ExpressionEngine Dev Team' />
<meta name='description' content='CodeIgniter User Guide' />

</head>
<body>

<!-- START NAVIGATION -->
<div id="nav"><div id="nav_inner"><script type="text/javascript">create_menu('../');</script></div></div>
<div id="nav2"><a name="top"></a><a href="javascript:void(0);" onclick="myHeight.toggle();"><img src="../images/nav_toggle_darker.jpg" width="154" height="43" border="0" title="Toggle Table of Contents" alt="Toggle Table of Contents" /></a></div>
<div id="masthead">
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td><h1>CodeIgniter User Guide Version 2.2.1</h1></td>
<td id="breadcrumb_right"><a href="../toc.html">Table of Contents Page</a></td>
</tr>
</table>
</div>
<!-- END NAVIGATION -->


<!-- START BREADCRUMB -->
<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
<tr>
<td id="breadcrumb">
<a href="http://codeigniter.com/">CodeIgniter Home</a> &nbsp;&#8250;&nbsp;
<a href="../index.html">User Guide Home</a> &nbsp;&#8250;&nbsp;
File Uploading Class
</td>
<td id="searchbox"><form method="get" action="http://www.google.com/search"><input type="hidden" name="as_sitesearch" id="as_sitesearch" value="codeigniter.com/user_guide/" />Search User Guide&nbsp; <input type="text" class="input" style="width:200px;" name="q" id="q" size="31" maxlength="255" value="" />&nbsp;<input type="submit" class="submit" name="sa" value="Go" /></form></td>
</tr>
</table>
<!-- END BREADCRUMB -->

<br clear="all" />


<!-- START CONTENT -->
<div id="content">


<h1>File Uploading Class</h1>

<p>CodeIgniter's File Uploading Class permits files to be uploaded.  You can set various
preferences, restricting the type and size of the files.</p>


<h2>The Process</h2>

<p>Uploading a file involves the following general process:</p>


<ul>
<li>An upload form is displayed, allowing a user to select a file and upload it.</li>
<li>When the form is submitted, the file is uploaded to the destination you specify.</li>
<li>Along the way, the file is validated to make sure it is allowed to be uploaded based on the preferences you set.</li>
<li>Once uploaded, the user will be shown a success message.</li>
</ul>

<p>To demonstrate this process here is brief tutorial. Afterward you'll find reference information.</p>

<h2>Creating the Upload Form</h2>



<p>Using a text editor, create a form called <dfn>upload_form.php</dfn>.  In it, place this code and save it to your <samp>applications/views/</samp>
folder:</p>


<textarea class="textarea" style="width:100%" cols="50" rows="23">
&lt;html>
&lt;head>
&lt;title>Upload Form&lt;/title>
&lt;/head>
&lt;body>

&lt;?php echo $error;?>

&lt;?php echo form_open_multipart('upload/do_upload');?>

&lt;input type="file" name="userfile" size="20" />

&lt;br />&lt;br />

&lt;input type="submit" value="upload" />

&lt;/form>

&lt;/body>
&lt;/html></textarea>

<p>You'll notice we are using a form helper to create the opening form tag.  File uploads require a multipart form, so the helper
creates the proper syntax for you.  You'll also notice we have an $error variable.  This is so we can show error messages in the event
the user does something wrong.</p>


<h2>The Success Page</h2>

<p>Using a text editor, create a form called <dfn>upload_success.php</dfn>.
In it, place this code and save it to your <samp>applications/views/</samp> folder:</p>

<textarea class="textarea" style="width:100%" cols="50" rows="20">&lt;html>
&lt;head>
&lt;title>Upload Form&lt;/title>
&lt;/head>
&lt;body>

&lt;h3>Your file was successfully uploaded!&lt;/h3>

&lt;ul>
&lt;?php foreach ($upload_data as $item => $value):?>
&lt;li>&lt;?php echo $item;?>: &lt;?php echo $value;?>&lt;/li>
&lt;?php endforeach; ?>
&lt;/ul>

&lt;p>&lt;?php echo anchor('upload', 'Upload Another File!'); ?>&lt;/p>

&lt;/body>
&lt;/html></textarea>


<h2>The Controller</h2>

<p>Using a text editor, create a controller called <dfn>upload.php</dfn>.  In it, place this code and save it to your <samp>applications/controllers/</samp>
folder:</p>


<textarea class="textarea" style="width:100%" cols="50" rows="43">&lt;?php

class Upload extends CI_Controller {

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

	function index()
	{
		$this->load->view('upload_form', array('error' => ' ' ));
	}

	function do_upload()
	{
		$config['upload_path'] = './uploads/';
		$config['allowed_types'] = 'gif|jpg|png';
		$config['max_size']	= '100';
		$config['max_width']  = '1024';
		$config['max_height']  = '768';

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

		if ( ! $this->upload->do_upload())
		{
			$error = array('error' => $this->upload->display_errors());

			$this->load->view('upload_form', $error);
		}
		else
		{
			$data = array('upload_data' => $this->upload->data());

			$this->load->view('upload_success', $data);
		}
	}
}
?&gt;</textarea>


<h2>The Upload Folder</h2>

<p>You'll need a destination folder for your uploaded images.  Create a folder at the root of your CodeIgniter installation called
<dfn>uploads</dfn> and set its file permissions to 777.</p>


<h2>Try it!</h2>

<p>To try your form, visit your site using a URL similar to this one:</p>

<code>example.com/index.php/<var>upload</var>/</code>

<p>You should see an upload form. Try uploading an image file (either a jpg, gif, or png). If the path in your
controller is correct it should work.</p>


<p>&nbsp;</p>

<h1>Reference Guide</h1>


<h2>Initializing the Upload Class</h2>

<p>Like most other classes in CodeIgniter, the Upload class is initialized in your controller using the <dfn>$this->load->library</dfn> function:</p>

<code>$this->load->library('upload');</code>
<p>Once the Upload class is loaded, the object will be available using: <dfn>$this->upload</dfn></p>


<h2>Setting Preferences</h2>

<p>Similar to other libraries, you'll control what is allowed to be upload based on your preferences.  In the controller you
built above you set the following preferences:</p>

<code>$config['upload_path'] = './uploads/';<br />
$config['allowed_types'] = 'gif|jpg|png';<br />
$config['max_size']	= '100';<br />
$config['max_width']  = '1024';<br />
$config['max_height']  = '768';<br />
<br />
$this->load->library('upload', $config);<br /><br />

// Alternately you can set preferences by calling the initialize function.  Useful if you auto-load the class:<br />
$this->upload->initialize($config);</code>

<p>The above preferences should be fairly self-explanatory.  Below is a table describing all available preferences.</p>


<h2>Preferences</h2>

<p>The following preferences are available.  The default value indicates what will be used if you do not specify that preference.</p>

<table cellpadding="0" cellspacing="1" border="0" style="width:100%" class="tableborder">
<tr>
<th>Preference</th>
<th>Default&nbsp;Value</th>
<th>Options</th>
<th>Description</th>
</tr>

<tr>
<td class="td"><strong>upload_path</strong></td>
<td class="td">None</td>
<td class="td">None</td>
<td class="td">The path to the folder where the upload should be placed.  The folder must be writable and the path can be absolute or relative.</td>
</tr>

<tr>
<td class="td"><strong>allowed_types</strong></td>
<td class="td">None</td>
<td class="td">None</td>
<td class="td">The mime types corresponding to the types of files you allow to be uploaded.  Usually the file extension can be used as the mime type.  Separate multiple types with a pipe.</td>
</tr>


<tr>
<td class="td"><strong>file_name</strong></td>
<td class="td">None</td>
<td class="td">Desired file name</td>
<td class="td">
	<p>If set CodeIgniter will rename the uploaded file to this name.  The extension provided in the file name must also be an allowed file type.</p>
</td>
</tr>

<tr>
<td class="td"><strong>overwrite</strong></td>
<td class="td">FALSE</td>
<td class="td">TRUE/FALSE (boolean)</td>
<td class="td">If set to true, if a file with the same name as the one you are uploading exists, it will be overwritten. If set to false, a number will be appended to the filename if another with the same name exists.</td>
</tr>


<tr>
<td class="td"><strong>max_size</strong></td>
<td class="td">0</td>
<td class="td">None</td>
<td class="td">The maximum size (in kilobytes) that the file can be.  Set to zero for no limit. Note:  Most PHP installations have their own limit, as specified in the php.ini file.  Usually 2 MB (or 2048 KB) by default.</td>
</tr>

<tr>
<td class="td"><strong>max_width</strong></td>
<td class="td">0</td>
<td class="td">None</td>
<td class="td">The maximum width (in pixels) that the file can be.  Set to zero for no limit.</td>
</tr>

<tr>
<td class="td"><strong>max_height</strong></td>
<td class="td">0</td>
<td class="td">None</td>
<td class="td">The maximum height (in pixels) that the file can be.  Set to zero for no limit.</td>
</tr>

<tr>
<td class="td"><strong>max_filename</strong></td>
<td class="td">0</td>
<td class="td">None</td>
<td class="td">The maximum length that a file name can be.  Set to zero for no limit.</td>
</tr>

<tr>
<td class="td"><strong>encrypt_name</strong></td>
<td class="td">FALSE</td>
<td class="td">TRUE/FALSE (boolean)</td>
<td class="td">If set to TRUE the file name will be converted to a random encrypted string. This can be useful if you would like the file saved with a name that can not be discerned by the person uploading it.</td>
</tr>

<tr>
<td class="td"><strong>remove_spaces</strong></td>
<td class="td">TRUE</td>
<td class="td">TRUE/FALSE (boolean)</td>
<td class="td">If set to TRUE, any spaces in the file name will be converted to underscores. This is recommended.</td>
</tr>
</table>


<h2>Setting preferences in a config file</h2>

<p>If you prefer not to set preferences using the above method, you can instead put them into a config file.
Simply create a new file called the <var>upload.php</var>,  add the <var>$config</var>
array in that file. Then save the file in: <var>config/upload.php</var> and it will be used automatically. You
will NOT need to use the <dfn>$this->upload->initialize</dfn> function if you save your preferences in a config file.</p>


<h2>Function Reference</h2>

<p>The following functions are available</p>


<h2>$this->upload->do_upload()</h2>

<p>Performs the upload based on the preferences you've set.  Note:  By default the upload routine expects the file to come from a form field
called <dfn>userfile</dfn>, and the form must be a "multipart type:</p>

<code>&lt;form method="post" action="some_action" enctype="multipart/form-data" /></code>

<p>If you would like to set your own field name simply pass its value to the <dfn>do_upload</dfn> function:</p>

<code>
$field_name = "some_field_name";<br />
$this->upload->do_upload($field_name)</code>


<h2>$this->upload->display_errors()</h2>

<p>Retrieves any error messages if the <dfn>do_upload()</dfn> function returned false.  The function does not echo automatically, it
returns the data so you can assign it however you need.</p>

<h3>Formatting Errors</h3>
<p>By default the above function wraps any errors within &lt;p> tags.  You can set your own delimiters like this:</p>

<code>$this->upload->display_errors('<var>&lt;p></var>', '<var>&lt;/p></var>');</code>

<h2>$this->upload->data()</h2>

<p>This is a helper function that returns an array containing all of the data related to the file you uploaded.
Here is the array prototype:</p>

<code>Array<br />
(<br />
&nbsp;&nbsp;&nbsp;&nbsp;[file_name]&nbsp;&nbsp;&nbsp;&nbsp;=> mypic.jpg<br />
&nbsp;&nbsp;&nbsp;&nbsp;[file_type]&nbsp;&nbsp;&nbsp;&nbsp;=> image/jpeg<br />
&nbsp;&nbsp;&nbsp;&nbsp;[file_path]&nbsp;&nbsp;&nbsp;&nbsp;=> /path/to/your/upload/<br />
&nbsp;&nbsp;&nbsp;&nbsp;[full_path]&nbsp;&nbsp;&nbsp;&nbsp;=> /path/to/your/upload/jpg.jpg<br />
&nbsp;&nbsp;&nbsp;&nbsp;[raw_name]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=> mypic<br />
&nbsp;&nbsp;&nbsp;&nbsp;[orig_name]&nbsp;&nbsp;&nbsp;&nbsp;=> mypic.jpg<br />
&nbsp;&nbsp;&nbsp;&nbsp;[client_name]&nbsp;&nbsp;=> mypic.jpg<br />
&nbsp;&nbsp;&nbsp;&nbsp;[file_ext]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=> .jpg<br />
&nbsp;&nbsp;&nbsp;&nbsp;[file_size]&nbsp;&nbsp;&nbsp;&nbsp;=> 22.2<br />
&nbsp;&nbsp;&nbsp;&nbsp;[is_image]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;=> 1<br />
&nbsp;&nbsp;&nbsp;&nbsp;[image_width]&nbsp;&nbsp;=> 800<br />
&nbsp;&nbsp;&nbsp;&nbsp;[image_height] => 600<br />
&nbsp;&nbsp;&nbsp;&nbsp;[image_type]&nbsp;&nbsp;&nbsp;=> jpeg<br />
&nbsp;&nbsp;&nbsp;&nbsp;[image_size_str] => width="800" height="200"<br />
)</code>

<h3>Explanation</h3>

<p>Here is an explanation of the above array items.</p>

<table cellpadding="0" cellspacing="1" border="0" style="width:100%" class="tableborder">
<tr><th>Item</th><th>Description</th></tr>

<tr><td class="td"><strong>file_name</strong></td>
<td class="td">The name of the file that was uploaded including the file extension.</td></tr>

<tr><td class="td"><strong>file_type</strong></td>
<td class="td">The file's Mime type</td></tr>

<tr><td class="td"><strong>file_path</strong></td>
<td class="td">The absolute server path to the file</td></tr>

<tr><td class="td"><strong>full_path</strong></td>
<td class="td">The absolute server path including the file name</td></tr>

<tr><td class="td"><strong>raw_name</strong></td>
<td class="td">The file name without the extension</td></tr>

<tr><td class="td"><strong>orig_name</strong></td>
<td class="td">The original file name.  This is only useful if you use the encrypted name option.</td></tr>

<tr><td class="td"><strong>client_name</strong></td>
<td class="td">The file name as supplied by the client user agent, prior to any file name preparation or incrementing.</td></tr>

<tr><td class="td"><strong>file_ext</strong></td>
<td class="td">The file extension with period</td></tr>

<tr><td class="td"><strong>file_size</strong></td>
<td class="td">The file size in kilobytes</td></tr>

<tr><td class="td"><strong>is_image</strong></td>
<td class="td">Whether the file is an image or not.  1 = image. 0 = not.</td></tr>

<tr><td class="td"><strong>image_width</strong></td>
<td class="td">Image width.</td></tr>

<tr><td class="td"><strong>image_height</strong></td>
<td class="td">Image height</td></tr>

<tr><td class="td"><strong>image_type</strong></td>
<td class="td">Image type.  Typically the file extension without the period.</td></tr>

<tr><td class="td"><strong>image_size_str</strong></td>
<td class="td">A string containing the width and height.  Useful to put into an image tag.</td></tr>


</table>

</div>
<!-- END CONTENT -->


<div id="footer">
<p>
Previous Topic:&nbsp;&nbsp;<a href="encryption.html">Encryption Helper</a>
&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="#top">Top of Page</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
<a href="../index.html">User Guide Home</a>&nbsp;&nbsp;&nbsp;&middot;&nbsp;&nbsp;
Next Topic:&nbsp;&nbsp;<a href="form_validation.html">Form Validation Class</a>
</p>
<p><a href="http://codeigniter.com">CodeIgniter</a> &nbsp;&middot;&nbsp; Copyright &#169; 2006 - 2014 &nbsp;&middot;&nbsp; <a href="http://ellislab.com/">EllisLab, Inc.</a> &nbsp;&middot;&nbsp; Copyright &#169; 2014 - 2015 &nbsp;&middot;&nbsp; <a href="http://bcit.ca/">British Columbia Institute of Technology</a></p>
</div>

</body>
</html>