Refresh after uploading is done

[trevata]

Hi. In short, how can I make this javascript to refresh the page when uploading is done ? :)

function $m(theVar){
	return document.getElementById(theVar)
}
function remove(theVar){
	var theParent = theVar.parentNode;
	theParent.removeChild(theVar);
}
function addEvent(obj, evType, fn){
	if(obj.addEventListener)
	    obj.addEventListener(evType, fn, true)
	if(obj.attachEvent)
	    obj.attachEvent("on"+evType, fn)
}
function removeEvent(obj, type, fn){
	if(obj.detachEvent){
		obj.detachEvent('on'+type, fn);
	}else{
		obj.removeEventListener(type, fn, false);
	}
}
function isWebKit(){
	return RegExp(" AppleWebKit/").test(navigator.userAgent);
}
function ajaxUpload(form,url_action,id_element,html_show_loading,html_error_http){
	var detectWebKit = isWebKit();
	form = typeof(form)=="string"?$m(form):form;
	var erro="";
	if(form==null || typeof(form)=="undefined"){
		erro += "The form of 1st parameter does not exists.\n";
	}else if(form.nodeName.toLowerCase()!="form"){
		erro += "The form of 1st parameter its not a form.\n";
	}

	if(erro.length>0){
		alert("Error in call ajaxUpload:\n" + erro);
		return;
	}
	var iframe = document.createElement("iframe");
	iframe.setAttribute("id","ajax-temp");
	iframe.setAttribute("name","ajax-temp");
	iframe.setAttribute("width","0");
	iframe.setAttribute("height","0");
	iframe.setAttribute("border","0");
	iframe.setAttribute("style","width: 0; height: 0; border: none;");
	form.parentNode.appendChild(iframe);
	window.frames['ajax-temp'].name="ajax-temp";
	var doUpload = function(){
		removeEvent($m('ajax-temp'),"load", doUpload);
		var cross = "javascript: ";
		cross += "window.parent.$m('"+id_element+"').innerHTML = document.body.innerHTML; void(0);";
		$m(id_element).innerHTML = html_error_http;
		$m('ajax-temp').src = cross;
		if(detectWebKit){
        	remove($m('ajax-temp'));
        }else{
        	setTimeout(function(){ remove($m('ajax-temp'))}, 250);
		}
    }
	addEvent($m('ajax-temp'),"load", doUpload);
	form.setAttribute("target","ajax-temp");
	form.setAttribute("action",url_action);
	form.setAttribute("method","post");
	form.setAttribute("enctype","multipart/form-data");
	form.setAttribute("encoding","multipart/form-data");
	if(html_show_loading.length > 0){
		$m(id_element).innerHTML = html_show_loading;
	}
	form.submit();
}

If you need the php file:

<?php
include "config.php";
@header("Content-Type: text/html; charset=windows-1251");
$fileN = $_REQUEST['pic'];
if (isset($fileN)){
    $allowed_ext = "jpg,jpeg,gif,png";
    $filesize = $_FILES['pic']['size'];
    $maxlimit = 9999999999;
    if($filesize > 0){
          $filename = strtolower($_FILES['pic']['name']);
          $filename = preg_replace('/\s/', '_', $filename);
		   	if($filesize < 1){
				$errorList[] = "Empty file!";
                echo "Empty file!";
			}
			if($filesize > $maxlimit){
				$errorList[] = "File too big!";
                 echo "File too big! (1MB max)";
			}
              if(count($errorList)<1){
                $file_ext = preg_split("/\./",$filename);
				$allowed_ext = preg_split("/\,/",$allowed_ext);
                $rand = rand(100,999).rand(10,99).rand(100,500);
                $front_name = substr($file_ext[0], 0, 15);
                $newfilename = $front_name."_".$rand.".".end($file_ext);
                foreach($allowed_ext as $ext){
                  if($ext==end($file_ext)){
                  $data = date("d.m.Y");
                  $zapis = mysqlCountR("mmvet_obqvi", "date = '$data' AND userip = '$ip' AND active = 0");
                    if($zapis > 0){
                      $picsB = mysqlGet("mmvet_obqvi", "*", 0, "date = '$data' AND userip = '$ip' AND active = 0");
                      $allpics = $picsB['pics'];
                      $picsEx = explode(",", $allpics);
                        if(sizeof($picsEx) == 5){
                            echo "You can't upload more than 5 pictures!";
                        }else{
                            $plusPic = $allpics.",".$newfilename;
                            mysqlSet("mmvet_obqvi", "pics", "$plusPic", "date = '$data' AND userip = '$ip' AND active = 0", "~ ");
                        }
                    }else{
                        mysqlAdd("mmvet_obqvi", "null,null,null,null,null,null,$data,null,null,null,null,null,null,null,null,$newfilename,$ip,0");
                    }
                        if(sizeof($picsEx) <= 5 ){
                            copy($_FILES['pic']['tmp_name'], "_data/uploads/".$newfilename);
                            saveThumb("_data/uploads/".$newfilename, 283, 212, "_data/uploads/thumbbig_".$newfilename, end($file_ext));
                            saveThumb("_data/uploads/".$newfilename, 108, 81, "_data/uploads/thumbsmall_".$newfilename, end($file_ext));
                            unlink("_data/uploads/".$newfilename);
                            $imgUploaded = true;;
                        }
                  }
                }

              }else{
                $imgUploaded = false;
              }
    }else{
      echo "No file chosen!";
      $imgUploaded = false;
    }
}else{
  echo "No file!";
}
?>

[anish.anick]

Catch the ajax on complete state when the readyState property becomes 4, after that execute the javascript code window.location.reload() to refresh/reloading the page

Regards
Anish

[trevata]

Yeah. But here I don't have an XMLHTTP Object :-/ And I don't know how the javascript understands when the uploading is done :-O

[RationalRabbit]

I believe the whole point of this code is to avoid refreshing the page by loading the image in the hidden iframe, as you cannot really use Ajax to upload an image.

So, if you are going to refresh the page, I would use a simpler method, like sending the results of your upload form back to the top of the page and process it.