uploader-simple.html revision ec3da7f85c70d991f53c50587791088b994256f7
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix<html>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix<head>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix <title>Uploader Example: Single File Upload with Progress Tracking and a Sprite-skinned Button</title>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix <script type="text/javascript" src="/build/yui/yui-min.js"></script>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix <script type="text/javascript" src="/build/uploader-deprecated/uploader-deprecated.js"></script>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix <style type="text/css">
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix .uploadButton a {
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix display:block;
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix width:100px;
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix height:40px;
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix text-decoration: none;
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix }
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix .uploadButton a {
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix background: url("assets/uploadFileButton.png") 0 0 no-repeat;
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix }
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix .uploadButton a:visited {
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix background-position: 0 0;
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix }
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix .uploadButton a:hover {
4852f347df5405e934e2ccd5b30597d196f3949ctweenk background-position: 0 -40px;
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix }
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix .uploadButton a:active {
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix background-position: 0 -80px;
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix }
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix </style>
09ba3247163582bf2e30e17c4c154aa259ce038acilix
43d06c7da14a174c6b2b41f9849b0cf098de4770mental</head>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix<body>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix<h1>Uploader Example: Single File Upload with Progress Tracking and a Sprite-skinned Button</h1>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
3ca2560f1103677939f8b6e8de30865c3aef7fe0cilix<div id="selectButton" style="width:100px;height:40px"></div>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix<div class="uploadButton"><a href="#" id="uploadButtonLink"></a></div>
71dea9c6fbd2fd6d73cce6f1ed96151d51ada58fcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix<div id="filename">
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilixFile selected:
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix</div>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix<div id="percent">
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilixPercent uploaded:
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix</div>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix<script>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilixYUI({ debug:true, filter:"raw" }).use('base', 'event', 'node', 'swf', 'uploader-deprecated', function (Y) {
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilixvar uploader = new Y.Uploader({boundingBox:"#selectButton",
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix swfURL:"/build/uploader-deprecated/assets/uploader.swf",
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix buttonSkin:"assets/selectFileButton.png",
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix transparent: false});
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilixuploader.on("uploaderReady", setupUploader);
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilixuploader.on("fileselect", fileSelect);
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilixuploader.on("uploadprogress", updateProgress);
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilixuploader.on("uploadcomplete", uploadComplete);
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilixY.one("#uploadButtonLink").on("click", uploadFile);
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilixfunction setupUploader (event) {
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix uploader.set("multiFiles", false);
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix uploader.set("log", true);
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix var fileFilters = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix {description:"Videos", extensions:"*.avi;*.mov;*.mpg"});
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix uploader.set("fileFilters", fileFilters);
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix}
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilixfunction fileSelect (event) {
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix var fileData = event.fileList;
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix for (var key in fileData) {
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix var output = "File selected: " + fileData[key].name;
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix Y.one("#filename").setContent(output);
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix }
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix}
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilixfunction updateProgress (event) {
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix Y.one("#percent").setContent("Percent uploaded: " + Math.round((100 * event.bytesLoaded / event.bytesTotal)) + "%");
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix}
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilixfunction uploadComplete (event) {
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix Y.one("#percent").setContent("Upload complete!");
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix}
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilixfunction uploadFile (event) {
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix uploader.uploadAll("http://www.yswfblog.com/upload/upload_simple.php");
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix}
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
09ba3247163582bf2e30e17c4c154aa259ce038acilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix});
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix</script>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix
182911d054ac2fa73e3bf625b5ea0710bfb416f0cilix</body>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix</html>
4358ff6156766a315e38e72a5c3c83d6d5f7486bcilix