Reputation: 27
i'm using prototype for an easy notation of ajax requests/updates, now i got this form on my page that makes it possible to upload multiple files (html5 allows the basic form) But whenever i click the submit button the form opens up the action page. i don't like it to do this is there a way to disable the refresh and still submit the post data sent from the form?
i have tried "return false" on a submit but this still refreshes my page
code of form:
<form id='uploadfrm' onSubmit='check();return false;' action='upload_handler.php' enctype='multipart/form-data'>
<input type='file' name='files[]' multiple='multiple' min='1' max='9999'/>
<input type='hidden' name='msid' id='ms_id' value='5' />
<input type='submit' value='upload' onClick='check();' />
</form>
code of ajax request that gets the form to my page:
new Ajax.Updater('uploadform','ajax-parser.php',{
parameters: {
action: 'get_mediaupload'
}
});
where uploadform is a hidden div and action is a var on which i switch in my parser, however hidden i can still let it see through ligthview using
Lightview.show( { href: '#uploadform', options: { autosize: true, topclose: true } });
i have also tried the ajax serialize() and request methods to do a submit from ajax side but both tries have been unsuccesfull.
the setup of my page is very simple i have an index page and an ajax-parser filled with php code to send ajax requests to, and ofc an upload handler code of handler:
if (isset($_FILES['files'])){
foreach($_FILES['files']['name'] as $key=>$tmp_name)
{
echo $_FILES['files']['name'][$key];
$upload_dir= "upload/" . $_FILES['files']['name'][$key];
echo $upload_dir;
if(move_uploaded_file($_FILES['files']['tmp_name'][$key], $upload_dir)) {
echo "The file ". $_FILES['files']['name'][$key].
" has been uploaded";
} else{
echo "There was an error uploading the file, please try again!";
}
}
}
Upvotes: 0
Views: 4555
Reputation: 7097
Hese is the perfect solution for upload file without refresh....
<script type="text/javascript">
function init() {
document.getElementById("slide_upload_form").onsubmit=function() {
document.getElementById("slide_upload_form").target = "iframe_upload_target";
document.getElementById("iframe_upload_target").onload = uploadDone;
}
}
</script>
<script type="text/javascript">
window.onload=init;
</script>
<script type="text/javascript">
function uploadDone() {
var ret = frames['iframe_upload_target'].document.getElementsByTagName("body")[0].innerHTML;
var data = eval("("+ret+")");
alert(data);
if(data.error_msg == "null") {
alert('Invalid Browse Image...');
}
</script>
<form id="slide_upload_form" method="post" enctype="multipart/form-data"
action="<?php echo SITE_URL."uploadslidecontent/index"?>">
<iframe id="iframe_upload_target" onload="uploadDone()" name="iframe_upload_target"
src="" style="width:1px;height:1px;display:none"></iframe>
<label><span>Image:</span>
<input name="slideOneImg" id="slideOneImg" type="file" />
</label>
</form>
how to validate if browser field is null so post return to data like this uploadslidecontent/index
if($file_name == ''){
print json_encode(array(
"error_msg" => 'null'
));
No cross Browser Issue.....
Upvotes: 4