Upload multiple files in PHP with Uploadify!

June 22, 2011 in jQuery, PHP by
, , 12 Comments

Author:

I am a web developer. I work on JavaScript, PHP, ASP.NET, jQuery, ActionScript, AJAX and Facebook application, as well as interested in social networking and daily active user on Twitter, Facebook and Google+
Download Demostration

We have enough way to upload multiple files in PHP, either you use your own script or use third party application. In the same regards I am using Uploadify to upload multiple files. There are some basic and easy steps which will help you to save your time :)

About Uploadify

Uploadify is a jQuery plugin that integrates a fully-customizable multiple file upload utility on your website. It uses a mixture of Javascript, ActionScript, and any server-side language to dynamically create an instance over any DOM element on a page.

Features

  • jQuery Implementation
  • Multiple File Upload Capabilities
  • SWFObject Integration
  • Compatibility with Popular Server-Side Languages
  • Highly-Customizable
  • Large Support Community
  • Extensive Documentation with Examples

Click here to more information or download Uploadify

Step #1 – Head

Okay! Now we start with the basic procedures, add CSS, Javascripts and Uploadify configuration in head section.

<!-- CSS -->
<link rel="stylesheet" href="uploadifyit/uploadify.css" type="text/css" />

<!-- Javascript -->
<script type="text/javascript" src="uploadifyit/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="uploadifyit/swfobject.js"></script>
<script type="text/javascript" src="uploadifyit/jquery.uploadify.v2.1.4.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

	//alert('I am ready to use uploadify!');
	$("#file_upload").uploadify({
		'uploader': 'uploadifyit/uploadify.swf',
		'script': 'uploadifyit/uploadify.php',
		'cancelImg': 'uploadifyit/cancel.png',
		'folder': 'uploads',
		'auto': false, // use for auto upload
		'multi': true,
		'queueSizeLimit': 2,
		'onQueueFull': function(event, queueSizeLimit) {
			alert("Please don't put anymore files in me! You can upload " + queueSizeLimit + " files at once");
			return false;
		},
		'onComplete': function(event, ID, fileObj, response, data) {
			alert("Filename: " + fileObj.name + "\nSize: " + fileObj.size + "\nFilepath: " + fileObj.filePath);

			// you can use here jQuery AJAX method to send info at server-side.
		}
	});

});

</script>

Step #2 – Body

After the add code into head section, we have to just add a little code into Body, here is your code

<form id="form1" name="form1" action="">
<input type="file" id="file_upload" name="file_upload" /><br />
<a href="javascript:$('#file_upload').uploadifyUpload();">Upload File</a>
</form>

Alright. You can see the video, I hope it would be brief you much to use Uploadify in your projects.

Thank you!


Kick It on DotNetKicks.com   Shout it  

Popularity: 18%

Comments on this entry (12 comments)

Did you like this post? You can share your opinion with us! Simply click here.

screamwork

cool cool… what a options demo session ;-)

Published on 22 June 2011
Reply
peifgzi

omg, man..i definitely love you:D … as i see your page will be visited by me also in future, cause of ur great tutorials… many thanks!

i couldn’t figure out how to upload image and immediately jCrop it.. with uploadify it is done :)

Published on 03 July 2011
Reply
Asif Iqbal

Thank you for visiting.. I am trying my best.. I hope you will like in future as well..

Published on 04 July 2011
Collin

Thank’s!

I totally agree with peifgzi :D

Published on 13 August 2011
Reply
Gagan

great.. I was trying this plugin but the mail page of Documentation has wrong script for how to make basic use of this plugin.. I followed your post it worked in first shot..

would be nice if u can complete it with how to insert uploaded file’s path to DB..

Published on 05 September 2011
Reply
Asif Iqbal

Gagan,

I just created another tutorial to help you out. I hope it will help you a lot. Just check it out: Insert multiple uploaded files entry into database in PHP using Uploadify! .

Thanks,

Published on 11 September 2011
kiran

Nice article Asif and nice presentation.I am working with uploadify using Asp.net and Sql Server and facing some problem while saving images to the database can you do me a video regarding this or can you help me with the code.As I am able to save it to the folder and display them but I need the images to be saved and resized them and placed them in the seperate folder so that I nee to display thumbnails after uploading all the images.

Published on 06 September 2011
Reply
kiran

Here is my Handler code:

Imports System
Imports System.Web
Imports System.IO

Public Class UploadVB : Implements IHttpHandler

Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
Dim postedFile As HttpPostedFile = context.Request.Files(“Filedata”)

Dim savepath As String = “”
Dim tempPath As String = “”
tempPath = System.Configuration.ConfigurationManager.AppSettings(“FolderPath”)
savepath = context.Server.MapPath(tempPath)
Dim filename As String = postedFile.FileName
If Not Directory.Exists(savepath) Then
Directory.CreateDirectory(savepath)
End If

postedFile.SaveAs((savepath & “\”) + filename)
context.Response.Write((tempPath & “/”) + filename)
context.Response.StatusCode = 200

End Sub

Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return False
End Get
End Property

End Class

Published on 06 September 2011
Reply
more

can i place two uploadify buttons in a single page.?

Published on 22 September 2011
Reply
Asif Iqbal

Yes off course, you can place more than one button in a single page.

Published on 23 September 2011
Julian Egelstaff

Be warned, Uploadify does no validation of the file that is being uploaded. This is a GIGANTIC security hole. If you use it as-is, out-of-the-box, then attackers can upload whatever files they want to your server. This is VERY dangerous. Make sure you are modifying the backend script (the “script” defined when you declare the uploadify parameters, by default it’s uploadify.php), and validating the file extension at least before moving it to where it belongs.

Published on 10 October 2011
Reply
Asif Iqbal

Yes I understand all the security holes, it is just for a beginning tutorial. A developer can secure easily, it depends on him/her

Thank you for guiding me.

Published on 10 October 2011

Add Your Comment