202 lines
5.7 KiB
HTML
202 lines
5.7 KiB
HTML
<!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=gb2312" />
|
|
<title>flash upload</title>
|
|
<script type="text/javascript" src="js/mootools.js"></script>
|
|
<script type="text/javascript" src="js/Swiff.Uploader.js"></script>
|
|
<script type="text/javascript" src="js/Fx.ProgressBar.js"></script>
|
|
<script type="text/javascript" src="js/Lang.js"></script>
|
|
<script type="text/javascript" src="js/FancyUpload2.js"></script>
|
|
<script type="text/javascript">
|
|
window.addEvent('domready', function() { // wait for the content
|
|
var up = new FancyUpload2($('demo-status'), $('demo-list'), {
|
|
verbose: true,
|
|
url: $('form-demo').action,
|
|
path: 'swf/Swiff.Uploader.swf',
|
|
typeFilter: {
|
|
'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'
|
|
},
|
|
target: 'demo-browse',
|
|
onLoad: function() {
|
|
//$('demo-status').removeClass('hide'); // we show the actual UI
|
|
//$('demo-fallback').destroy(); // ... and hide the plain form
|
|
this.target.addEvents({
|
|
click: function() {
|
|
return false;
|
|
},
|
|
mouseenter: function() {
|
|
this.addClass('hover');
|
|
},
|
|
mouseleave: function() {
|
|
this.removeClass('hover');
|
|
this.blur();
|
|
},
|
|
mousedown: function() {
|
|
this.focus();
|
|
}
|
|
});
|
|
$('demo-clear').addEvent('click', function() {
|
|
up.remove(); // remove all files
|
|
return false;
|
|
});
|
|
$('demo-upload').addEvent('click', function() {
|
|
up.start(); // start upload
|
|
return false;
|
|
});
|
|
},
|
|
onSelectFail: function(files) {
|
|
files.each(function(file) {
|
|
new Element('li', {
|
|
'class': 'validation-error',
|
|
html: file.validationErrorMessage || file.validationError,
|
|
title: MooTools.lang.get('FancyUpload', 'removeTitle'),
|
|
events: {
|
|
click: function() {
|
|
this.destroy();
|
|
}
|
|
}
|
|
}).inject(this.list, 'top');
|
|
}, this);
|
|
},
|
|
|
|
/**
|
|
* This one was directly in FancyUpload2 before, the event makes it
|
|
* easier for you, to add your own response handling (you probably want
|
|
* to send something else than JSON or different items).
|
|
*/
|
|
onFileSuccess: function(file, response) {
|
|
var json = new Hash(JSON.decode(response, true) || {});
|
|
|
|
if (json.get('status') == '1') {
|
|
file.element.addClass('file-success');
|
|
file.info.set('html', '<strong>Image was uploaded:</strong> ' + json.get('width') + ' x ' + json.get('height') + 'px, <em>' + json.get('mime') + '</em>)');
|
|
} else {
|
|
file.element.addClass('file-failed');
|
|
file.info.set('html', '<strong>An error occured:</strong> ' + (json.get('error') ? (json.get('error') + ' #' + json.get('code')) : response));
|
|
}
|
|
},
|
|
|
|
/**
|
|
* onFail is called when the Flash movie got bashed by some browser plugin
|
|
* like Adblock or Flashblock.
|
|
*/
|
|
onFail: function(error) {
|
|
switch (error) {
|
|
case 'hidden': // works after enabling the movie and clicking refresh
|
|
alert('To enable the embedded uploader, unblock it in your browser and refresh (see Adblock).');
|
|
break;
|
|
case 'blocked': // This no *full* fail, it works after the user clicks the button
|
|
alert('To enable the embedded uploader, enable the blocked Flash movie (see Flashblock).');
|
|
break;
|
|
case 'empty': // Oh oh, wrong path
|
|
alert('A required file was not found, please be patient and we fix this.');
|
|
break;
|
|
case 'flash': // no flash 9+ :(
|
|
alert('To enable the embedded uploader, install the latest Adobe Flash plugin.')
|
|
}
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
//]]>
|
|
</script>
|
|
<style type="text/css">
|
|
.swiff-uploader-box a {
|
|
display: none !important;
|
|
}
|
|
#demo-list {
|
|
list-style: none;
|
|
width: 450px;
|
|
margin: 0;
|
|
}
|
|
|
|
#demo-list li.validation-error {
|
|
padding-left: 44px;
|
|
display: block;
|
|
clear: left;
|
|
line-height: 40px;
|
|
color: #8a1f11;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #fbc2c4;
|
|
background: #fbe3e4 url(images/failed.png) no-repeat 4px 4px;
|
|
}
|
|
|
|
#demo-list li.file {
|
|
border-bottom: 1px solid #eee;
|
|
background: url(images/file.png) no-repeat 4px 4px;
|
|
overflow: auto;
|
|
}
|
|
#demo-list li.file.file-uploading {
|
|
background-image: url(images/uploading.png);
|
|
background-color: #D9DDE9;
|
|
}
|
|
#demo-list li.file.file-success {
|
|
background-image: url(images/success.png);
|
|
}
|
|
#demo-list li.file.file-failed {
|
|
background-image: url(images/failed.png);
|
|
}
|
|
|
|
#demo-list li.file .file-name {
|
|
font-size: 1.2em;
|
|
margin-left: 44px;
|
|
display: block;
|
|
clear: left;
|
|
line-height: 40px;
|
|
height: 40px;
|
|
font-weight: bold;
|
|
}
|
|
#demo-list li.file .file-size {
|
|
font-size: 0.9em;
|
|
line-height: 18px;
|
|
float: right;
|
|
margin-top: 2px;
|
|
margin-right: 6px;
|
|
}
|
|
#demo-list li.file .file-info {
|
|
display: block;
|
|
margin-left: 44px;
|
|
font-size: 0.9em;
|
|
line-height: 20px;
|
|
clear
|
|
}
|
|
#demo-list li.file .file-remove {
|
|
clear: right;
|
|
float: right;
|
|
line-height: 18px;
|
|
margin-right: 6px;
|
|
} </style>
|
|
<script>
|
|
function ok(){
|
|
var obj=document.form1;
|
|
obj.action="script.php?v1="+obj.v1.value;
|
|
return true;
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<form name="form1" action="script.php" method="post" enctype="multipart/form-data" id="form-demo" onsubmit="return ok()">
|
|
|
|
<input type="text" name="v1" value="sss" style="width:200px">
|
|
<div id="demo-status" class="hide">
|
|
<p>
|
|
<a href="#" id="demo-browse">浏览图片</a> |
|
|
<a href="#" id="demo-clear">清除列表</a> |
|
|
<a href="#" id="demo-upload">开始上传</a>
|
|
</p>
|
|
<div>
|
|
<strong class="overall-title"></strong><br />
|
|
<img src="images/progress-bar/bar.gif" class="progress overall-progress" />
|
|
</div>
|
|
<div>
|
|
<strong class="current-title"></strong><br />
|
|
<img src="images/progress-bar/bar.gif" class="progress current-progress" />
|
|
</div>
|
|
<div class="current-text"></div>
|
|
</div>
|
|
<ul id="demo-list"></ul>
|
|
</form>
|
|
</body>
|
|
</html> |