Ajax File Upload not work with multiple form
Multiple form with multiple progress bar not work, When I click on the
first form all the progress bar are activated, , but when you click on the
first form, only the first progress bar must be activated!!
HTML
<form id="myForm" action="upload.php" method="post"
enctype="multipart/form-data">
<input type="file" size="60" name="myfile" id="inputItemId">
<input type="submit" value="Ajax File Upload">
<input type="text" size="60" name="file-input" id="hiddenDivId" value="">
</form>
<div id="myForm">
<div class="progress" >
<div class="bar" ></div>
<div class="percent" >0%</div>
</div>
<br/>
<div class="message" ></div>
</div>
<form id="myForm1" action="upload.php" method="post"
enctype="multipart/form-data">
<input type="file" size="60" name="file1" id="inputItemId">
<input type="hidden" id="upload" value="upload-2">
<input type="submit" value="Ajax File Upload">
<input type="text" size="60" name="file-input" id="hiddenDivId" value="">
</form>
<div id="myForm1">
<div class="progress" >
<div class="bar" ></div>
<div class="percent" >0%</div>
</div>
<br/>
<div class="message" ></div>
</div>
AJAX
$(document).ready(function()
{
var bar = $('div.bar');
var percent = $('div.percent');
var progress = $('div.progress');
var message = $('div.message');
var options = {
beforeSend: function()
{
var value = $('#upload').val();
var inputName = $('#inputItemId').val();
progress.show();
//clear everything
bar.width('0%');
message.html("");
percent.html("0%");
},
uploadProgress: function(event, position, total, percentComplete)
{
bar.width(percentComplete+'%');
percent.html(percentComplete+'%');
},
success: function()
{
bar.width('100%');
percent.html('100%');
},
complete: function(response)
{
message.html("<font color='green'>"+response.responseText+"</font>");
$('#hiddenDivId').val(response.responseText);
},
error: function()
{
message.html("<font color='red'> ERROR: unable to upload files</font>");
}
};
$("#myForm").ajaxForm(options);
$("#myForm1").ajaxForm(options);
$("#myForm2").ajaxForm(options);
});
No comments:
Post a Comment