hi Friends,
I need to Upload some files in a Listing , by clicking
corresponding Upload link, then a popup window will
come with Browse option as Shown in attachment File.
My actual need is upload files using that , but
I can upload only 1 file there , I need to upload 1 to
5 files at a time based on need . How it can implement.
I give my Working code here , in php Help me , if
you know any other method to do same that’s idea also
acceptable.
Home Page (index.html)
<link href="ajaxfileupload.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"
src="ajaxfileupload.js"></script>
<script>
function ajaxFileUpload()
{
$("#loading")
.ajaxStart(function(){
$(this).show();
})
.ajaxComplete(function(){
$(this).hide();
});
$.ajaxFileUpload
(
{
url:'doajaxfileupload.php',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
success: function (data, status)
{
/*if(typeof(data.error) !=
'undefined')
{
if(data.error != '')
{
alert(data.error);
//toggle('wrapper');
}else
{
alert(data.msg);
//toggle('wrapper');
}
}*/
},
error: function (data, status, e)
{
//alert(e);
// toggle('wrapper');
}
}
)
return false;
}
function displayBox(windowname,no)
{
// $("#wrapper").show();
blanket_size(windowname);
window_pos(windowname);
toggle(windowname);
if(no>1)
{
var current_no = parseInt(no-1);
//alert("current no is:"+current_no);
//alert("need more field");
for(var j=1;j<no;j++)
{
//document.getElementById('opt'+j).style.display = 'block';
$("#opt"+j).show();
}
}
}
function toggle(div_id) {
//var el = document.getElementById(div_id);
//var el = $("#div_id");
// if ( el.style.display == 'none' ) { el.style.display =
'block';}
//else {el.style.display = 'none';}
$("#"+div_id).toggle();
}
function blanket_size(popUpDivVar) {
/*if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight =
document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight)
&& (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight >
document.body.parentNode.scrollHeight) {
blanket_height =
document.body.parentNode.clientHeight;
} else {
blanket_height =
document.body.parentNode.scrollHeight;
}
}*/
//var blanket = document.getElementById('wrapper');
//blanket.style.height = blanket_height + 'px';
//blanket.style.height = 325 + 'px';
$("#wrapper")[0].style.height = 325 + 'px';
// var popUpDiv = document.getElementById(popUpDivVar);
//popUpDiv_height=blanket_height/2-150;//150 is half popup's
height
//popUpDiv.style.top = popUpDiv_height + 'px';
//popUpDiv.style.top = 45 + 'px';
$("#"+popUpDivVar)[0].style.top = 45 + 'px';
}
function window_pos(popUpDivVar) {
/*if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) &&
(viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth >
document.body.parentNode.scrollWidth) {
window_width =
document.body.parentNode.clientWidth;
} else {
window_width =
document.body.parentNode.scrollWidth;
}
}*/
//var popUpDiv = document.getElementById(popUpDivVar);
//window_width=window_width/2-150;//150 is half popup's width
//window_width = 45;
//popUpDiv.style.left = window_width + 'px';
$("#"+popUpDivVar)[0].style.left = 45 + 'px';
}
</script>
<style>
#wrapper {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:50%;
}
</style>
<body > <a href="javascript:displayBox('wrapper',4);"> Upload Source
</a> </body>
<div id="wrapper" style="display:none;">
<div id="close"><a href="javascript:toggle('wrapper');"
title="close" ><img src="close.jpg" border="0"></a></div>
<div id="content">
<h1>Ajax File Upload Demo</h1>
<img id="loading" src="loading.gif"
style="display:none;">
<form name="form" action="" method="POST"
enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0"
class="tableForm">
<thead>
<tr>
<th>Please select a file and click
Upload button</th>
</tr>
</thead>
<tbody>
<tr>
<td height=35><input id="fileToUpload0"
type="file" size="45" name="fileToUpload0" class="input"></td>
</tr>
<tr id="opt1" style="display:none;">
<td height=35><input id="fileToUpload1"
type="file" size="45" name="fileToUpload1" class="input"></td>
</tr>
<tr id="opt2" style="display:none;">
<td height=35><input id="fileToUpload2"
type="file" size="45" name="fileToUpload2" class="input"></td>
</tr>
<tr id="opt3" style="display:none;">
<td height=35><input id="fileToUpload3"
type="file" size="45" name="fileToUpload3" class="input"></td>
</tr>
<tr id="opt4" style="display:none;">
<td height=35><input id="fileToUpload4"
type="file" size="45" name="fileToUpload4" class="input"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button class="button"
id="buttonUpload" onclick="return
ajaxFileUpload();">Upload</button></td>
</tr>
</tfoot>
</table>
</form>
</div>
Server file - php (doajaxfileupload.php)
<?php
$error = "";
$msg = "";
$fileElementName = "fileToUpload";
for($j=0;$j<5;$j++)
{
//echo "Hi";
//echo "name is
:".$_FILES["fileToUpload1"]["name"]."<br />";
//if(!empty($_FILES[$fileElementName.$j]['error']))
if($_FILES["fileToUpload".$j]['error']>0)
{
$error = "Some error in file upload";
}
else
{
move_uploaded_file($_FILES["fileToUpload".$j]["tmp_name"],"images/".$_
FILES["fileToUpload".$j]["name"]);
}
}
?>
Javascript file(ajaxfileupload.js )
jQuery.extend({
createUploadIframe: function(id, uri)
{
//create frame
var frameId = 'jUploadFrame' + id;
if(window.ActiveXObject) {
var io = document.createElement('<iframe id="' +
frameId + '" name="' + frameId + '" />');
if(typeof uri== 'boolean'){
io.src = 'javascript:false';
}
else if(typeof uri== 'string'){
io.src = uri;
}
}
else {
var io = document.createElement('iframe');
io.id = frameId;
io.name = frameId;
}
io.style.position = 'absolute';
io.style.top = '-1000px';
io.style.left = '-1000px';
document.body.appendChild(io);
return io
},
createUploadForm: function(id, fileElementId)
{
//create form
var formId = 'jUploadForm' + id;
var fileId = 'jUploadFile' + id;
var form = $('<form action="" method="POST" name="' +
formId + '" id="' + formId + '"
enctype="multipart/form-data"></form>');
var oldElement = $('#' + fileElementId);
var newElement = $(oldElement).clone();
$(oldElement).attr('id', fileId);
$(oldElement).before(newElement);
$(oldElement).appendTo(form);
//set attributes
$(form).css('position', 'absolute');
$(form).css('top', '-1200px');
$(form).css('left', '-1200px');
$(form).appendTo('body');
return form;
},
ajaxFileUpload: function(s) {
// TODO introduce global settings, allowing the client to
modify them for all requests, not only timeout
s = jQuery.extend({}, jQuery.ajaxSettings, s);
var id = new Date().getTime()
var form = jQuery.createUploadForm(id,
s.fileElementId);
var io = jQuery.createUploadIframe(id, s.secureuri);
var frameId = 'jUploadFrame' + id;
var formId = 'jUploadForm' + id;
// Watch for a new set of requests
if ( s.global && ! jQuery.active++ )
{
jQuery.event.trigger( "ajaxStart" );
}
var requestDone = false;
// Create the request object
var xml = {}
if ( s.global )
jQuery.event.trigger("ajaxSend", [xml, s]);
// Wait for a response to come back
var uploadCallback = function(isTimeout)
{
var io = document.getElementById(frameId);
try
{
if(io.contentWindow)
{
xml.responseText =
io.contentWindow.document.body?io.contentWindow.document.body.innerHTM
L:null;
xml.responseXML =
io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDoc
ument:io.contentWindow.document;
}else if(io.contentDocument)
{
xml.responseText =
io.contentDocument.document.body?io.contentDocument.document.body.inne
rHTML:null;
xml.responseXML =
io.contentDocument.document.XMLDocument?io.contentDocument.document.XM
LDocument:io.contentDocument.document;
}
}catch(e)
{
jQuery.handleError(s, xml, null, e);
}
if ( xml || isTimeout == "timeout")
{
requestDone = true;
var status;
try {
status = isTimeout != "timeout" ? "success" :
"error";
// Make sure that the request was successful or
notmodified
if ( status != "error" )
{
// process the data (runs the xml through
httpData regardless of callback)
var data = jQuery.uploadHttpData( xml,
s.dataType );
// If a local callback was specified, fire it
and pass it the data
if ( s.success )
s.success( data, status );
// Fire the global callback
if( s.global )
jQuery.event.trigger( "ajaxSuccess", [xml,
s] );
} else
jQuery.handleError(s, xml, status);
} catch(e)
{
status = "error";
jQuery.handleError(s, xml, status, e);
}
// The request was completed
if( s.global )
jQuery.event.trigger( "ajaxComplete", [xml, s] );
// Handle the global AJAX counter
if ( s.global && ! --jQuery.active )
jQuery.event.trigger( "ajaxStop" );
// Process result
if ( s.complete )
s.complete(xml, status);
jQuery(io).unbind()
setTimeout(function()
{ try
{
$(io).remove();
$(form).remove();
} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
}, 100)
xml = null
}
}
// Timeout checker
if ( s.timeout > 0 )
{
setTimeout(function(){
// Check to see if the request is still happening
if( !requestDone ) uploadCallback( "timeout" );
}, s.timeout);
}
try
{
// var io = $('#' + frameId);
var form = $('#' + formId);
$(form).attr('action', s.url);
$(form).attr('method', 'POST');
$(form).attr('target', frameId);
if(form.encoding)
{
form.encoding = 'multipart/form-data';
}
else
{
form.enctype = 'multipart/form-data';
}
$(form).submit();
} catch(e)
{
jQuery.handleError(s, xml, null, e);
}
if(window.attachEvent){
document.getElementById(frameId).attachEvent('onload',
uploadCallback);
}
else{
document.getElementById(frameId).addEventListener('load',
uploadCallback, false);
}
return {abort: function () {}};
},
uploadHttpData: function( r, type ) {
var data = !type;
data = type == "xml" || data ? r.responseXML : r.responseText;
// If the type is "script", eval it in global context
if ( type == "script" )
jQuery.globalEval( data );
// Get the JavaScript object, if JSON is used.
if ( type == "json" )
eval( "data = " + data );
// evaluate scripts within html
if ( type == "html" )
jQuery("<div>").html(data).evalScripts();
//alert($('param',
data).each(function(){alert($(this).attr('value'));}));
return data;
}
})
Style (ajaxfileupload.css)
===================================
html, body
{
margin: 0;
padding: 0;
}
body
{
font: 12px/1.3em Arial, Helvetica, sans-serif;
color: #000;
background-color: #fff;
}
h1, h2, h3, h4, h5
{
margin: 0 0 1em;
color: #F2683E;
}
h1
{
font-size: 18px;
font-weight: normal;
}
p{margin: 0 0 1em;}
a,
a:link,
a:visited{color: #F2683E;}
a:hover,
a:active{}
a img{border: none;}
form{margin: 0;}
fieldset{padding: 0;}
hr
{
height: 1px;
border: none;
color: #999;
background-color: #999;
}
/* ~~~ === POSITIONG SELECTORS =======================================
~~~ */
#wrapper
{
position: relative;
width: 773px;
height: 474px;
background: url(../images/kiwisaver/body_bg.gif) no-repeat 0 0;
}
#content
{
float: left;
display: inline;
width: 541px;
height: 341px;
margin: 30px 0 0 8px;
padding: 22px;
}
I attach the image and Working copy as zip, please take
it and you can work , Help me with your idea.
Regards Anes(anes.pa@gmail.com)