manual.htm | searchcode

/tests/manual.htm

https://github.com/philwhln/ajax-upload
HTML | 230 lines | 212 code | 15 blank | 3 comment | 0 complexity | 93b81f740bccc745842b231d926864b8 MD5 | raw file

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Testing AJAX Upload</title>

        <!-- We will load jQuery and Prototypejs to ensure that we don't have any conflicts -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>                
        <!-- Also test with jQuery UI Dialog-->
        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-darkness/jquery-ui.css" type="text/css" media="all" />
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>        
        
        <!-- AJAX Upload script itself doesn't have any dependencies -->
        <script type="text/javascript" src="../ajaxupload.js"></script>
        <style type="text/css">
            body {
                font-family: verdana;
                font-size: 12px;
                background: #373A32;
                color: #D0D0D0;
            }
            
            h1,h2 {
                font-size: 14px;
                font-weight: 400;
                color: white;
            }            
            a {color: white;}
            
            .wr {
                width: 500px;
                margin: 0 auto;
            }
            
            .button {}
            .button.hover {color:green;}
        </style>
    </head>
    <body>
        <div class="wr">
            <p>This is a set of tests, to confirm that AJAX Upload works with most options.</p>
            
            <h2>Test 1 - Default options</h2>
            <p>                
                <a id="test1" class="button" href="http://valums.com/">Inline "A" element as upload button</a>
                <script>
                jQuery(function(){                    
                    new AjaxUpload('test1', {
                        action: 'upload-test.php',
                        onComplete: function(file, response){                        
                            alert(response);
                        }
                    });
                });                    
                </script>                
            </p>
            
            <h2>Test 1b - With select multiple:true</h2>
            <p>                
                <a id="test1a" class="button" href="http://valums.com/">Inline "A" element as multiple upload button</a>
                <script>
                jQuery(function(){                    
                    new AjaxUpload('test1a', {
                        action: 'upload-test.php',
                        name: 'userfile[]',
                        multiple: true,
                        onComplete: function(file, response){                        
                            alert(response);
                        }
                    });
                });                    
                </script>                
            </p>
            
            <h2>Test 2 - Huge button - Default options - addressing with #test2</h2>
            <div id="test2" class="button" style="background: #AFA8A4; border: 5px solid black; width:100%; height: 500px; margin: 20px 0;">
                "DIV" element as upload button. Fixed width and height.                
            </div>
	        <script>
                jQuery(function(){                    
                    new AjaxUpload('#test2', {
                        action: 'upload-test.php',
                        onComplete: function(file, response){                        
                            alert(response);
                        }
                    });
                });                    
            </script>
            <h2>Test 3 - Resize window and check 1 and 2 again</h2>            
            <h2>Test 4 - Check all options !!!</h2>
            <p>
                When alerted upload is disabled.
                <a id="test4" class="button" href="http://valums.com/">Select</a>
                <a id="test4upload" href='#'>Submit &amp; Enable</a>
            </p>
            <p>Check with image and some other file</p>
<pre>                 
var upload = new AjaxUpload(jQuery('#test4'), {
    action: 'upload-test.php',
    name: 'woohoo-custom-name',
    data: {
        'key1': "This data won't be sent, we will overwrite it."
    },
    autoSubmit: false,
    responseType: 'json',
    onChange: function(file, ext){
    },
    onSubmit: function(file, ext){
        // Allow only images. You should add security check on the server-side.
        if (ext && /^(jpg|png|jpeg|gif)$/i.test(ext)) {                            
            this.setData({
                'key1': 'This should be alerted',
                'key2': '...'
            });
        } else {
            alert('not image');
            return false;
        }                            
    },
    onComplete: function(file, response){
        this.disable();
        alert(response.post.key1);
    }
});
jQuery('#test4upload').click(function(){
    upload.submit();
    upload.enable();
    return false;
});
</pre>
	        <script>
                jQuery(function(){                    
                    var upload = new AjaxUpload(jQuery('#test4'), {
                        action: 'upload-test.php',
                        name: 'woohoo-custom-name',
                        data: {
                            'key1': "This data won't be sent, we will overwrite it."
                        },
                        autoSubmit: false,
                        responseType: 'json',
                        onChange: function(file, ext){
                        },
                        onSubmit: function(file, ext){
                            // Allow only images. You should add security check on the server-side.
                            if (ext && /^(jpg|png|jpeg|gif)$/i.test(ext)) {                            
                                this.setData({
                                    'key1': 'This should be alerted',
                                    'key2': '...'
                                });
                            } else {
                                alert('not image');
                                return false;
                            }                            
                        },
                        onComplete: function(file, response){
                            this.disable();
                            alert(response.post.key1);
                        }
                    });
                    jQuery('#test4upload').click(function(){
                        upload.submit();
                        upload.enable();
                        return false;
                    });
                });                    
            </script>    
            <h2>Test 5 - Return false in onChange and file values</h2>       
            <p>
                <a id="test5" class="button" href="http://valums.com/">Select</a>
            </p>              
<pre>
new AjaxUpload(document.getElementById('test5'),{
    onChange: function(file, ext){
        return false;
    }
});    
</pre>            
	        <script>
                jQuery(function(){                    
                    new AjaxUpload(document.getElementById('test5'),{
                        onChange: function(file, ext){
                            alert(file + '\n' + ext);
                            return false;
                        }
                    });
                });                    
            </script>             
            
            <h2>Test 6 - with jQuery UI dialog - onSubmit this.disable();</h2>             
            <p>
                <a id="open_dialog" href="#">Button in jQuery dialog, using input[type=file]</a>
            </p>
            <div id="dialog" style="display:none;" title="Basic dialog with Upload button">
                <p>
                    The Ajax Upload should work perfectly with jQuery UI dialog
                </p>
                <input id="dialog_upload" class="button" type="file" />
            </div>
            
            <script>
                jQuery(function($){
                    var upload = new AjaxUpload('dialog_upload', {
                        action: 'upload-test.php',
                        onSubmit: function(){
                            this.disable();
                        },
                        onComplete: function(file, response){                        
                            alert(response);
                        }
                    });	         
                                 
                    $("#dialog").dialog({
                        autoOpen: false,
                        beforeclose: function(event, ui){},
                        dragStop: function(event, ui){}

                    });
                    
                    $('#open_dialog').click(function(){
                        $("#dialog").dialog("open");
                        return false;	
                    });	
                    
 
                });                             
            </script>
        </div>
    </body>
</html>