CodeIgniter Forums
CI problem: Upload image without submitting form? - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: CI problem: Upload image without submitting form? (/showthread.php?tid=51450)



CI problem: Upload image without submitting form? - El Forum - 05-04-2012

[eluser]super_Tai[/eluser]
Hi everybody!

I'm a newbie.

I want to upload image file without submitting form. It is like:

https://picasaweb.google.com/102771258563811761221/May42012#slideshow/5738602248084731186

This is an "Edit form". I want to click "Upload" button to upload another image file and preview.

I tried using some javascript, ajax, jquery which is directed on some websites, but it can't do that. Even, I tried doing like "http://net.tutsplus.com/tutorials/javascript-ajax/how-to-upload-files-with-codeigniter-and-ajax/", but it still require submitting form.

My knowledge about javascript, ajax, jquery is not much.

Can you give me an example via my email or in this topic? Thanks!

please, help me.

my email: mrdhtai@yahoo.com or sieutaibk@yahoo.com





CI problem: Upload image without submitting form? - El Forum - 05-04-2012

[eluser]boltsabre[/eluser]
You cannot do an image upload (dynamic) with just javascript or one of it's libraries (ie. jQuery). Ajax, by itself, does not handle file uploads for security reasons. You'll have to use either an iFrame, a Java applet or flash. I'd go with the first method as it doesn't require users to have any extra software/s installed on their machine.

I doubt your problem is with CI, but rather with the process/concept itself (without being able to see any code).

My suggestion, hit google and find some good "dynamic image upload" tutorials, and then code a vanilla php/jQuery/ajax/iFrame upload uploader. Once you've got that up and working, then try to integrate it into your CI project.


CI problem: Upload image without submitting form? - El Forum - 05-04-2012

[eluser]cahva[/eluser]
The tutsplus article is closest what you need. Even though its "submitting" the form, the normal behaviour (reloading the page) is prevented with e.preventDefault() and fileupload happens in background.


CI problem: Upload image without submitting form? - El Forum - 05-04-2012

[eluser]marcogmonteiro[/eluser]
Or if you want something that is completely integrated with ci, you can do a google search for imageCRUD.

Regarding the 3 suggestions from boltsabre I agree, if you're going to do it, do it with a iframe.


CI problem: Upload image without submitting form? - El Forum - 05-04-2012

[eluser]marcogmonteiro[/eluser]
[quote author="cahva" date="1336130426"]The tutsplus article is closest what you need. Even though its "submitting" the form, the normal behaviour (reloading the page) is prevented with e.preventDefault() and fileupload happens in background.[/quote]

That is also a good option.


CI problem: Upload image without submitting form? - El Forum - 05-04-2012

[eluser]cahva[/eluser]
These javascript ajaxfileuploader's create the iframe on the fly where fileupload actually happens through serverside script.


CI problem: Upload image without submitting form? - El Forum - 05-04-2012

[eluser]boltsabre[/eluser]
On a side note, if you're not already aware of it, file uploads leave some pretty MASSIVE security holes and problems. You should also research "php file upload security". Stuff like creating random image names (and renaming the file to the new random name) and storing them in a db table so you can find the image again, preventing double file extensions hacks, .htaccess hacks, and more!