CODEWITHSUNDEEP
phpajax
user1002761
user1002761

Reputation: 27

upload files without refresh page

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

Answers (2)

Ken Wheeler
Ken Wheeler

Reputation: 1958

I use uploadify. Pretty solid base ui.

Upvotes: 0

Query Master
Query Master

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

Related Questions