Upload an Image Using Objective-C

5.8.2012

If you're like me, you learn by example. Surprisingly, there are not many tutorials out there that make it clear exactly how to upload an image, or any file for that matter, from an iOS device to a server using the iOS preferred native language, Objective C. I have no idea why this is, so here I am, your humble goat author, attempting to rectify this nasty situation.

Before we get underway, this walkthrough utilizes MKNetworkKit, a lightweight ARC framework that wraps primarily around the Core Services network framework. Alright, you're probably asking why not just use the Core Services network framework. Here's why: MKNetworkKit provides a single shared network queue application wide, accurately fires the network indicator (yes, this is something you would have to manually manage), manages the number of concurrent connections based on wifi/3G/EDGE, auto caching GET requests (if desired), and operation freezing (if something happens to the connection). Sure, you can write all of this code yourself just like you could build your own jet fighter. I don't think you should go down that path. Let's begin.

Install MKNetworkKit

Clone the latest and greatest version of MKNetworkKit over at github. It is important to grab the latest version as there was a small bug with POSTs prior to mycommit. Drag the MKNetworkKit directory into your project within Xcode. Make sure to copy the items over if needed. Next, add the following built-in frameworks to your target: CFNetwork.Framework, SystemConfiguration.framework and Security.framework.Add '#import "MKNetworkKit.h"' within the PCH file.MKNetworkKit has support for both iOS and Mac builds. Since we're building an iOS app, remove the NSAlert+MKNetworkKitAdditions.h and NSAlert+MKNetworkKitAdditions.m files from the categories directory. The MKNetworkKit should be installed! Do a build to ensure you're good to go. You'll get some dev triggered warnings and that's ok. Carry on.

Select the file to upload

For the sake of simplicity, let's upload a photo. First, add an UIButton to the view and give it a title, "Upload Photo".Next, insert an action by pressing Ctrl+C on the UIButton and drag it over to the implementation (.m) file.Give the user some options when the button is clicked. To accomplish this, use an UIActionSheet. Be sure to add UIActionSheetDelegate to the header file. Within the UIActionSheet's delegate method, add a switch to determine which option was selected on the UIActionSheet. Within the case statements, create UIImagePickerController objects. Be sure to add the delegates UIImagePickerControllerDelegate and UINavigationControllerDelegate to the header file. For right now, add the UIImagePickerController delegate method with the didFinishPickingMediaWithInfo message. We'll fill it out in the next step.Oh! Before you go any further, if you're using the iOS simulator, use Safari within the simulator to download an image into your simulator's photo library.

Create a network engine

The MKNetworkEngine object manages the queues, caching, and other connectivity goodness that we, for the most part, don't have to worry about. To create one, add a new objective C class with the subclass MKNetworkEngine. Our engine will just have one defined method in it, postDataToServer.

POST file to the server

The crescendo of the walkthrough, this is the step where we finally get to reach out and touch someone. Before sending the photo to the server, you'll definitely want to compress the image using the UIImageJPEGRepresentation method. On top of that, you'll more than likely want to resize/rotate/crop the image. For this walkthrough, we're leaving out the later for brevity's sake. After the compression step, initialize the engine. You'll want to use the engine as a singleton, initialized within the appDelegate.To show you how to also pass parameters within the body, I've created a dictionary object called postParams. It has one parameter 'appID' with the value of 'testApp'. The network operation, flOperation, is being initialized from our engine's postDataToServer method. It will pass the postParams dictionary and the POST path. Let's introduce the compressed image to our network operation. MKNetwork operation has a method called addData that accepts, you guessed it, NSData. Lucky for us, our image is already within an NSData object. Define the success/error blocks and then add the request to the queue. You're all set!

Handle server response

If you're following along, character by character, the code will upload a photo and one parameter toposttestserver.com, a server managed byHenry Cipolla. Within the response returned as a result of the POST, his server will respond with a URL that will provide us more information about what we just POSTed. Our success block is very basic, outputting the response to the log (viewed within the right section of the bottom pane). If there's an error with the request, an UIAlertView will appear.

12 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

- ( void ) imagePickerController: ( UIImagePickerController * ) picker didFinishPickingMediaWithInfo: ( NSDictionary * ) info { [ self dismissModalViewControllerAnimated : YES ]; NSData * image = UIImageJPEGRepresentation ([ info objectForKey : UIImagePickerControllerOriginalImage ], 0.1 ); self . flUploadEngine = [[ fileUploadEngine alloc ] initWithHostName : @"posttestserver.com" customHeaderFields : nil ];   NSMutableDictionary * postParams = [ NSMutableDictionary dictionaryWithObjectsAndKeys : @"testApp" , @"appID" , nil ]; self . flOperation = [ self . flUploadEngine postDataToServer : postParams path : @"/post.php" ]; [ self . flOperation addData : image forKey : @"userfl" mimeType : @"image/jpeg" fileName : @"upload.jpg" ]; [ self . flOperation addCompletionHandler :^ ( MKNetworkOperation * operation ) { NSLog ( @"%@" , [ operation responseString ]); /* This is where you handle a successful 200 response */ } errorHandler :^ ( MKNetworkOperation * errorOp , NSError * error ) { NSLog ( @"%@" , error ); UIAlertView * alert = [[ UIAlertView alloc ] initWithTitle : @"Error" message: [ error localizedDescription ] delegate: nil cancelButtonTitle: @"Dismiss" otherButtonTitles: nil ]; [ alert show ]; }]; [ self . flUploadEngine enqueueOperation : self . flOperation ]; }

view raw imagePickerController method.m hosted with ❤ by GitHub

That's all folks. You can find my walkthrough code over at github. If you have any questions or comments about the walkthough, drop a comment or contactme.

转自：http://www.michaelroling.com/post/upload-an-image-using-objective-c