/tests/manual.htm
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 & 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>