Hello friends this is the new post on Codeigniter tutorials. In this post we are going to learn how to upload image file in Codeigniter framework application by using Jquery with Ajax without page refresh. I have received lots of request from my viewer to make tutorial on how to upload image or file in codeigniter framework by using Ajax with JQuery. I have been seen many of the beginner programmer has got problem to upload file or image to server by using ajax. For uploading of image or file by using ajax you have to put some code inside your ajax method.
Here we will send file data to server by using form data object. By using this object we will send file data to the server. So here first we have load view file from controller function and make image upload form and on that page we have write ajax code and in ajax code we have send selected file data to the server by using form data object. Then after from ajax method we have send request for upload image file to server and on server side we have called controller function and in that function we have load upload library with configuration like path of uploaded image and allowed types of image file and called function for upload. If image file uploaded then it will be display on web page and if there is some error while uploading then that error will be display on web page.
Codeigniter Image Upload Convert To Jpg To Pdf
$config 'imagelibrary' = 'gd2'; $config 'sourceimage' = '/path/to/image/mypic.jpg'; $config 'createthumb' = TRUE; $config 'maintainratio' = TRUE; $config 'width' = 75; $config 'height' = 50; $this - load - library ( 'imagelib', $config ); $this - imagelib - resize ;The above code tells the imageresize function to look for an imagecalled mypic.jpg located in the sourceimage folder, then create athumbnail that is 75 X 50 pixels using the GD2 imagelibrary. Since themaintainratio option is enabled, the thumb will be as close to thetarget width and height as possible while preserving the original aspectratio. The thumbnail will be called mypicthumb.jpg and located atthe same level as sourceimage.
The preferences described below allow you to tailor the image processingto suit your needs.Note that not all preferences are available for every function. Forexample, the x/y axis preferences are only available for image cropping.Likewise, the width and height preferences have no effect on cropping.The “availability” column indicates which functions support a givenpreference.Availability Legend:. R - Image Resizing.
C - Image Cropping. X - Image Rotation. W - Image WatermarkingPreferenceDefault ValueOptionsDescriptionAvailabilityimagelibraryGD2GD, GD2, ImageMagick, NetPBMSets the image library to be used.R, C, X, WlibrarypathNoneNoneSets the server path to your ImageMagick or NetPBM library. If you useeither of those libraries you must supply the path.R, C, XR, C, S, WsourceimageNoneNoneSets the source image name/path. The path must be a relative or absoluteserver path, not a URL.dynamicoutputFALSETRUE/FALSE (boolean)Determines whether the new image file should be written to disk orgenerated dynamically.
Note: If you choose the dynamic setting, only oneimage can be shown at a time, and it can’t be positioned on the page. Itsimply outputs the raw image dynamically to your browser, along withimage headers.R, C, X, Wfilepermissions0644(integer)File system permissions to apply on the resulting image file,writing it to the disk. WARNING: Use octal integer notation!R, C, X, Wquality90%1 - 100%Sets the quality of the image. The higher the quality the larger thefile size.R, C, X, WnewimageNoneNoneSets the destination image name/path. You’ll use this preference whencreating an image copy.
The path must be a relative or absolute serverpath, not a URL.R, C, X, WwidthNoneNoneSets the width you would like the image set to.R, CheightNoneNoneSets the height you would like the image set to.R, CcreatethumbFALSETRUE/FALSE (boolean)Tells the image processing function to create a thumb.RthumbmarkerthumbNoneSpecifies the thumbnail indicator. It will be inserted just before thefile extension, so mypic.jpg would become mypicthumb.jpgRmaintainratioTRUETRUE/FALSE (boolean)Specifies whether to maintain the original aspect ratio when resizing oruse hard values.R, Cmasterdimautoauto, width, heightSpecifies what to use as the master axis when resizing or creatingthumbs.
For example, let’s say you want to resize an image to 100 X 75pixels. If the source image size does not allow perfect resizing tothose dimensions, this setting determines which axis should be used asthe hard value.
“auto” sets the axis automatically based on whether theimage is taller than wider, or vice versa.RrotationangleNone90, 180, 270, vrt, horSpecifies the angle of rotation when rotating images. Note that PHProtates counter-clockwise, so a 90 degree rotation to the right must bespecified as 270.XxaxisNoneNoneSets the X coordinate in pixels for image cropping. For example, asetting of 30 will crop an image 30 pixels from the left.CyaxisNoneNoneSets the Y coordinate in pixels for image cropping.
For example, asetting of 30 will crop an image 30 pixels from the top.C. $config 'sourceimage' = '/path/to/image/mypic.jpg'; $config 'wmtext' = 'Copyright 2006 - John Doe'; $config 'wmtype' = 'text'; $config 'wmfontpath' = './system/fonts/texb.ttf'; $config 'wmfontsize' = '16'; $config 'wmfontcolor' = 'ffffff'; $config 'wmvrtalignment' = 'bottom'; $config 'wmhoralignment' = 'center'; $config 'wmpadding' = '20'; $this - imagelib - initialize ( $config ); $this - imagelib - watermark ;The above example will use a 16 pixel True Type font to create the text“Copyright 2006 - John Doe”. The watermark will be positioned at thebottom/center of the image, 20 pixels from the bottom of the image. This table shows the preferences that are available for both types ofwatermarking (text or overlay) PreferenceDefault ValueOptionsDescriptionwmtypetexttext, overlaySets the type of watermarking that should be used.sourceimageNoneNoneSets the source image name/path. The path must be a relative or absoluteserver path, not a URL.dynamicoutputFALSETRUE/FALSE (boolean)Determines whether the new image file should be written to disk orgenerated dynamically. Note: If you choose the dynamic setting, only oneimage can be shown at a time, and it can’t be positioned on the page.
Itsimply outputs the raw image dynamically to your browser, along withimage headers.quality90%1 - 100%Sets the quality of the image. The higher the quality the larger thefile size.wmpaddingNoneA numberThe amount of padding, set in pixels, that will be applied to thewatermark to set it away from the edge of your images.wmvrtalignmentbottomtop, middle, bottomSets the vertical alignment for the watermark image.wmhoralignmentcenterleft, center, rightSets the horizontal alignment for the watermark image.wmhoroffsetNoneNoneYou may specify a horizontal offset (in pixels) to apply to thewatermark position. The offset normally moves the watermark to theright, except if you have your alignment set to “right” then your offsetvalue will move the watermark toward the left of the image.wmvrtoffsetNoneNoneYou may specify a vertical offset (in pixels) to apply to the watermarkposition. The offset normally moves the watermark down, except if youhave your alignment set to “bottom” then your offset value will move thewatermark toward the top of the image.
This table shows the preferences that are available for the text type ofwatermarking. PreferenceDefault ValueOptionsDescriptionwmtextNoneNoneThe text you would like shown as the watermark. Typically this will be acopyright notice.wmfontpathNoneNoneThe server path to the True Type Font you would like to use. If you donot use this option, the native GD font will be used.wmfontsize16NoneThe size of the text. Note: If you are not using the True Type optionabove, the number is set using a range of 1 - 5. Otherwise, you can useany valid pixel size for the font you’re using.wmfontcolorffffffNoneThe font color, specified in hex. Both the full 6-length (ie, 993300) andthe short three character abbreviated version (ie, fff) are supported.wmshadowcolorNoneNoneThe color of the drop shadow, specified in hex.
If you leave this blanka drop shadow will not be used. Both the full 6-length (ie, 993300) andthe short three character abbreviated version (ie, fff) are supported.wmshadowdistance3NoneThe distance (in pixels) from the font that the drop shadow shouldappear. This table shows the preferences that are available for the overlay typeof watermarking. PreferenceDefault ValueOptionsDescriptionwmoverlaypathNoneNoneThe server path to the image you wish to use as your watermark. Requiredonly if you are using the overlay method.wmopacity501 - 100Image opacity. You may specify the opacity (i.e.
Transparency) of yourwatermark image. This allows the watermark to be faint and notcompletely obscure the details from the original image behind it.
A 50%opacity is typical.wmxtransp4A numberIf your watermark image is a PNG or GIF image, you may specify a coloron the image to be “transparent”. This setting (along with the next)will allow you to specify that color. This works by specifying the “X”and “Y” coordinate pixel (measured from the upper left) within the imagethat corresponds to a pixel representative of the color you want to betransparent.wmytransp4A numberAlong with the previous setting, this allows you to specify thecoordinate to a pixel representative of the color you want to betransparent. Class CIImagelib initialize ( $props = array ) Parameters:. $props ( array) – Image processing preferencesReturns:TRUE on success, FALSE in case of invalid settingsReturn type:boolInitializes the class for processing an image. Resize ( ) Returns:TRUE on success, FALSE on failureReturn type:boolThe image resizing method lets you resize the original image, create acopy (with or without resizing), or create a thumbnail image.For practical purposes there is no difference between creating a copyand creating a thumbnail except a thumb will have the thumbnail markeras part of the name (i.e.
Mypicthumb.jpg).All preferences listed in the table are available for thismethod except these three: rotationangle, xaxis and yaxis.Creating a ThumbnailThe resizing method will create a thumbnail file (and preserve theoriginal) if you set this preference to TRUE. $config 'newimage' = '/path/to/newimage.jpg';Notes regarding this preference:. If only the new image name is specified it will be placed in the samefolder as the original.
If only the path is specified, the new image will be placed in thedestination with the same name as the original. If both the path and image name are specified it will placed in itsown destination and given the new name.Resizing the Original ImageIf neither of the two preferences listed above (createthumb, andnewimage) are used, the resizing method will instead target theoriginal image for processing. Crop ( ) Returns:TRUE on success, FALSE on failureReturn type:boolThe cropping method works nearly identically to the resizing functionexcept it requires that you set preferences for the X and Y axis (inpixels) specifying where to crop, like this.