Googm - Tips and tricks for Javascript

Home

Javascript

This is a script to transfer files to a folder on the server using drag 'n drop (test it yourself). It only works in Firefox. In IE it is not possible at all and Google Chrome has created something funny: http://www.webmonkey.com/2010/04/google-turns-to-html5-for-gmails-new-drag-and-drop-attachments/

Here are the scripts for FireFox and PHP5:

The javascript part:

 
<script type="text/javascript" language="javascript1.2">
var upload = {
        setup : function() {
            var container = document.getElementById('container');
            var drop = document.getElementById('drop');            
            container.addEventListener("dragenter", function(event) {
                    event.stopPropagation();
                    event.preventDefault();
                }, 
                false
            );
            container.addEventListener("dragover", function(event) {                    
                    event.stopPropagation(); 
                    event.preventDefault();
                }, 
                false
            );
            container.addEventListener("drop", upload.uploadFiles, false);
        },        
        uploadFiles : function(event) {            
            var files = event.dataTransfer.files;
            document.getElementById("alert").innerHTML = "";
            document.getElementById("drop").innerHTML = "";
            event.stopPropagation();
            event.preventDefault();
            for (var x = 0; x < files.length; x++) {
                var file = files.item(x);                
                var xhr = new XMLHttpRequest();                
                xhr.onreadystatechange  = function()
                { 
                     if(xhr.readyState  == 4)
                     {
                          if(xhr.status  == 200)
                          {
                              if (xhr.responseText != "")
                              {
 document.getElementById("alert").innerHTML += " - Received:"  + xhr.responseText;
                              }
                          }
                          else
                          {
 document.getElementById("alert").innerHTML += " - Error code " + xhr.status + " - ";
                          }
                     }
                }; 
                fileUpload = xhr.upload,
                fileUpload.onload = function() 
                {
                    document.getElementById("alert").innerHTML += "Verzonden!";
                }
                document.getElementById("drop").innerHTML = "fileName: " +
file.fileName + "fileSize: " + file.fileSize;
                xhr.open("POST", "upload.php", true);                
                // do the AJAX request
                xhr.setRequestHeader("Cache-Control", "no-cache");
                xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
                xhr.setRequestHeader("X-File-Name", file.fileName);
                xhr.setRequestHeader("X-File-Size", file.fileSize);
                var destination = document.getElementById("destination").value;
                xhr.setRequestHeader("X-File-Destination", destination + "/");
                xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded;");
                //xhr.sendAsBinary(file.getAsBinary());
                //xhr.setRequestHeader("Content-Type", "multipart/form-data");
                xhr.send(file); 
            }
        },        
    };
    // activate upload.setup on load
    window.addEventListener("load", upload.setup, false);
</script>
 
<style>
#container
{
 min-width: 940px;
 min-height: 280px;
 border: 3px solid #F00;
 background-image:url(image/drophere.png);
 background-repeat: no-repeat;
 background-position: center bottom;
 background-color: #FFC;
}
</style>
</head>
<body>
<div id="container">
 <div id="drop"></div>
</div>
<input type="text" name="destination" id="destination" value="data" />
<div id="alert">--</div>
</body>

The PHP Class (does not work in PHP 4), save this script as Streamer.php, is used by upload.php (see further down):

<p>class File_Streamer
{
    private $_fileName;
    private $_contentLength;
    private $_destination;    
    public function __construct()
    {
        if (!isset($_SERVER['HTTP_X_FILE_NAME']) 
            && !isset($_SERVER['CONTENT_LENGTH'])) {
            throw new Exception("No headers found!");
        }
 
        $this->_fileName = $_SERVER['HTTP_X_FILE_NAME'];
        $this->_contentLength = $_SERVER['CONTENT_LENGTH'];
        $this->_destination = $_SERVER['HTTP_X_FILE_DESTINATION'];
    }    
    public function isValid()
    {
        if (($this->_contentLength > 0)) {
            return true;
        }
        return false;
    }    
    public function setDestination($destination)
    {
        $this->_destination = $destination;
    }    
    public function receive()
    {
        if (!$this->isValid()) {
            throw new Exception('No file uploaded!');
        }        
        file_put_contents(
$this->_destination . $this->_fileName, file_get_contents("php://input"));
        echo " Het bestand is opgeslagen";
        return true;
    }
}
</p>

The upload PHP script, save this script as upload.php:

require_once('Streamer.php');
$ft = new File_Streamer();
$ft->receive();

And of course the background image (displayed smaller than the original image):

Javascript window.open()

Thursday, 14 October 2010 15:01

Open a new small window using javascript:

var new_window = null;
function open_window()
{
 new_window = window.open('http://www.mobielstartpagina.nl/iphone', 'test',
 'fullscreen=no, height=600, left=200, location=no, menubar=no, resizable=no,
 scrollbars=no, status=no, titlebar=no, toolbar=no, top=200, width=350');
}

Returns a reference to the new window object: new_window

Close the window:

function close_window()
{
 if (new_window != null)
 {
  new_window.close();
 }
}

Javascript HIDE CODE