Upload jQuery, Flash & PHP

I’ve found one website shows Upload jQuery, flash & PHP.

http://www.uploadify.com/demo/

Multiple File Upload with iFrame

Our GM assign me to do multiple file upload program. At that time, I was supposed to implement with Ajax. But, one of my friends told me that Ajax cannot handle completely if clients upload serveral files. That’s why I have an idea to implement this program with iFrame.

Index.php

<iframe src=”upload.php” style=”width:260px;height:100px;” frameborder=”0″></iframe><br />
<iframe src=”upload.php” style=”width:260px;height:25px;” frameborder=”0″></iframe><br />
<iframe src=”upload.php” style=”width:260px;height:25px;” frameborder=”0″></iframe><br />

Upload.php

<script type=”text/javascript”>
function startUpload(){
if (document.getElementById(‘message’) != undefined) {
document.getElementById(‘message’).style.display = ‘none’;
}
document.getElementById(‘process’).style.display = ‘block’;
document.getElementById(‘uploadfile’).style.visibility = ‘hidden’;
return true;
}
</script>

<form method=”post” name=”uploadform” enctype=”multipart/form-data”>
<div style=”text-align:center;”>
<?php
if ($_FILES){
if ($_FILES['file']['error'] > 0) {
echo “<p id=’message’ style=’display:block;’>Fout code: “.$_FILES['file']['error'].”
(<a href=’http://php.net/manual/nl/features.file-upload.errors.php’ target=’_blank’>php-error</a>)</p>”;
}
move_uploaded_file($_FILES['file']['tmp_name'],
“upload/” . $_FILES['file']['name']);
echo “<p id=’message’ style=’display:block;’>Upload!</p>”;
}
}
?>
<p id=”process” style=”display:none;”>
Uploaden…<br/>
<img src=”loader.gif” alt=”loading” />
</p>
<input type=”file” name=”file” id=”uploadfile” onchange=”startUpload();document.uploadform.submit();” />
</div>
</form>

It’s simple, isn’t it?

Upload files with jQuery, Ajax and PHP.

In these days jQuery and Ajax are so popular in web development. One of my clients told me that, they want to upload multiple files without clicking button. That’s why I have had an idea to integrate jQuery, Ajax and PHP.

Download jQuery Here

Download ajax jQuery plugin

Create Upload Button like

<div id="upload_button">Upload</div>

Write following simple coding in your upload form

// You must create it only after the DOM is ready for manipulations
// Use $(document).ready for jquery
// document.observe("dom:loaded" for prototype
new AjaxUpload('upload_button_id', {action: 'upload.php'});

Configure at Ajax Upload

new AjaxUpload('#upload_button_id', {
  // Location of the server-side upload script
  action: 'upload.php',
  // File upload name
  name: 'userfile',
  // Additional data to send
  data: {
    example_key1 : 'example_value',
    example_key2 : 'example_value2'
  },
  // Submit file after selection
  autoSubmit: true,
  // The type of data that you're expecting back from the server.
  // Html (text) and xml are detected automatically.
  // Only useful when you are using json data as a response.
  // Set to "json" in that case.
  responseType: false,
  // Fired after the file is selected
  // Useful when autoSubmit is disabled
  // You can return false to cancel upload
  // @param file basename of uploaded file
  // @param extension of that file
  onChange: function(file, extension){},
  // Fired before the file is uploaded
  // You can return false to cancel upload
  // @param file basename of uploaded file
  // @param extension of that file
  onSubmit: function(file, extension) {},
  // Fired when file upload is completed
  // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
  // @param file basename of uploaded file
  // @param response server response
  onComplete: function(file, response) {}
});

Add following coding in your upload form

//You can use these methods, to configure AJAX Upload later.
var upload = new AjaxUpload(‘#div_id’,{action: ‘upload.php’});
//For example when user selects something, set some data
upload.setData({‘example_key’: ‘value’});

//Or you can use these methods directly inside event function
new AjaxUpload(‘div_id’, {
action: ‘upload.php’,
onSubmit: function() {
// allow only 1 upload
this.disable();
}
});
});

Here is server-side script, upload.php

move_uploaded_file($_FILES["file"]["tmp_name"],
“upload/” . $_FILES["file"]["name"]);

Best Credit To : http://valums.com/ajax-upload