1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="http://www.zurb.com/javascripts/jquery.js" type="text/javascript"></script>
<script src="http://www.zurb.com/javascripts/plugins/ajaxupload.js" type="text/javascript"></script>
<script src="http://www.zurb.com/javascripts/global.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var thumb = $('img#thumb');
new AjaxUpload('imageUpload', {
action: $('form#newHotnessForm').attr('action'),
name: 'image',
onSubmit: function(file, extension) {
$('div.preview').addClass('loading');
},
onComplete: function(file, response) {
thumb.load(function(){
$('div.preview').removeClass('loading');
thumb.unbind();
});
thumb.attr('src', response);
}
});
});
function initZURB(){}
</script>
<style>
span.wrap { padding: 10px; }
span.wrap.hotness { margin-left: 30px; }
span.wrap.old-and-busted { width: 358px; }
span.wrap button { display: block; margin-top: 10px; }
span.wrap label { margin-bottom: 5px; }
div.preview { float: left; width: 100px; height: 100px; border: 2px dotted #CCCCCC; }
div.preview.loading { background: url(../images/loading.gif) no-repeat 39px 40px; }
div.preview.loading img {display: none; }
/* input#imageUpload { width: 400px; }*/
div.highlight { margin-bottom: 20px; }
span.wrap form { margin: 0; }
</style>
</head>
<body>
<h2>New Hotness</h2>
<div class="column-row">
<div class="seven columns">
<div class="preview">
<img id="thumb" width="100px" height="100px" src="http://www.zurb.com/images/icons/128px/zurb.png" />
</div>
<span class="wrap hotness">
<form id="newHotnessForm" action="adresse de la page contenant le formulaire">
<label>Upload a Picture of Yourself</label>
<input type="file" id="imageUpload" size="20" />
<button type="submit" class="button">Save</button>
</form>
</span>
</div>
<div class="nine columns">
<p><strong>Now try this variation.</strong> We ditch the upload button in favor of a save button and fire the AJAX upload event as soon as a file
is selected. The image is processed server side and a thumbnail is loaded onto the existing page. Dosen't that feel so much better?</p>
<p>We now have a visual representation (imagine that) of the image we selected. This is particularly useful in larger forms when
many fields will be submitted with a single action. It allows the user to review the form before pressing save and see what image
(or images) they selected.</p>
</div>
</div>
<script type="text/javascript">
// This function will be located in: global.js
initZURB();
// This function will be located in: /public/javascripts/layouts/playground.js
if (typeof initLayout == 'function') initLayout();
// This function will be located in: /public/javascripts/controllers/playground.js
if (typeof ajaxUploadPage == 'function'){
ajaxUploadPage();
}
</script>
</body>
</html> |
Partager