Accueil > > > UPLOAD EN AJAX + FLASH (FANCY UPLOAD)
UPLOAD EN AJAX + FLASH (FANCY UPLOAD)
Information sur la source
Description
Superbe script réalisé par http://digitarald.de/project/fancyupload/ , Il permet l'envoi de fichiers multiples mais réellement multiples puisqu'il n'impose pas l'abondance d'input avec bouton parcourir, un seul suffit. En plus une barre d'avancement animée est intégrée ! Je suis sur que cette source intéressera du monde tout autan que moi ! Le problème étant je le trouve assez complexe et je n'arrive pas à l'installer ! Voila si vous êtes intéressés par ce script je serrai ravi d'essayer de comprendre avec vous comment l'installer !
Source
- /*
- ------------------------------------------------------------------------------------------------------------------------------------------------------------Script: Swiff.Uploader.js
- Contains <Swiff.Uploader>
-
- Author:
- Valerio Proietti, <http://mad4milk.net>,
- Harald Kirschner, <http://digitarald.de>
- */
-
- /*
- Class: Swiff.Uploader
- creates an uploader instance. Requires an existing Swiff.Uploader.swf instance.
-
- Arguments:
- callBacks - an object, containing key/value pairs, representing the possible callbacks. See below.
- onLoaded - Callback when the swf is initialized
- options - types, multiple, queued, swf, url, container
-
- callBacks:
- onOpen - a function to fire when the user opens a file.
- onProgress - a function to fire when the file is uploading. passes the name, the current uploaded size and the full size.
- onSelect - a function to fire when the user selects a file.
- onComplete - a function to fire when the file finishes uploading
- onError - a function to fire when there is an error.
- onCancel - a function to fire when the user cancels the file uploading.
- */
-
- Swiff.Uploader = new Class({
-
- options: {
- types: false,
- multiple: true,
- queued: true,
- swf: null,
- url: null,
- container: null
- },
-
- callBacks: {
- onOpen: Class.empty,
- onProgress: Class.empty,
- onSelect: Class.empty,
- onComplete: Class.empty,
- onError: Class.empty,
- onCancel: Class.empty
- },
-
- initialize: function(callBacks, onLoaded, options){
- if (Swiff.getVersion() < 8) return false;
- this.setOptions(options);
- this.onLoaded = onLoaded;
- var calls = $extend($merge(this.callBacks), callBacks || {});
- for (p in calls) calls[p] = calls[p].bind(this);
- this.instance = Swiff.nextInstance();
- Swiff.callBacks[this.instance] = calls;
- this.object = Swiff.Uploader.register(this.loaded.bind(this), this.options.swf, this.options.container);
- return this;
- },
-
- loaded: function(){
- Swiff.remote(this.object, 'create', this.instance, this.options.types, this.options.multiple, this.options.queued, this.options.url);
- this.onLoaded.delay(10);
- },
-
- browse: function(){
- Swiff.remote(this.object, 'browse', this.instance);
- },
-
- send: function(url){
- Swiff.remote(this.object, 'upload', this.instance, url);
- },
-
- remove: function(name, size){
- Swiff.remote(this.object, 'remove', this.instance, name, size);
- },
-
- fileIndex: function(name, size){
- return Swiff.remote(this.object, 'fileIndex', this.instance, name, size);
- },
-
- fileList: function(){
- return Swiff.remote(this.object, 'filelist', this.instance);
- }
-
- });
-
- Swiff.Uploader.implement(new Options);
-
- Swiff.Uploader.extend = $extend;
-
- Swiff.Uploader.extend({
-
- swf: 'Swiff.Uploader.swf',
-
- callBacks: [],
-
- register: function(callBack, url, container){
- if (!Swiff.Uploader.object || !Swiff.Uploader.loaded) {
- Swiff.Uploader.callBacks.push(callBack);
- if (!Swiff.Uploader.object) {
- Swiff.Uploader.object = new Swiff(url || Swiff.Uploader.swf, {callBacks: {'onLoad': Swiff.Uploader.onLoad}});
- (container || document.body).appendChild(Swiff.Uploader.object);
- }
- }
- else callBack.delay(10);
- return Swiff.Uploader.object;
- },
-
- onLoad: function(){
- Swiff.Uploader.loaded = true;
- Swiff.Uploader.callBacks.each(function(fn){
- fn.delay(10);
- });
- Swiff.Uploader.callBacks.length = 0;
- }
-
- });
-
- /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Script: Swiff.Base.js
-
- Contains <Swiff>, <Swiff.getVersion>, <Swiff.remote>
-
- Author:
- Valerio Proietti, <http://mad4milk.net>
- enhanced by Harald Kirschner <http://digitarald.de>
-
- Credits:
- Flash detection 'borrowed' from SWFObject.
- */
-
- /*
- Function: Swiff
- creates a flash object with supplied parameters.
-
- Arguments:
- source - the swf path.
- properties - an object with key/value pairs. all options are optional. see below.
- where - the $(element) to inject the flash object.
-
- Properties:
- width - int, the width of the flash object. defaults to 0.
- height - int, the height of the flash object. defaults to 0.
- id - string, the id of the flash object. defaults to 'Swiff-Object-num_of_object_inserted'.
- wmode - string, transparent or opaque.
- bgcolor - string, hex value for the movie background color.
- vars - an object of variables (functions, anything) you want to pass to your flash movie
-
- Returns:
- the object element, to be injected somewhere.
- Important: the $ function on the OBJECT element wont extend it, will just target the movie by its id/reference. So its not possible to use the <Element> methods on it.
- This is why it has to be injected using $('myFlashContainer').adopt(myObj) instead of $(myObj).injectInside('myFlashContainer');
-
- Example:
- (start code)
- var obj = new Swiff('myMovie.swf', {
- width: 500,
- height: 400,
- id: 'myBeautifulMovie',
- wmode: 'opaque',
- bgcolor: '#ff3300',
- vars: {
- onLoad: myOnloadFunc,
- myVariable: myJsVar,
- myVariableString: 'hello'
- }
- });
- $('myElement').adopt(obj);
- (end)
- */
-
- var Swiff = function(source, props){
- if (!Swiff.fixed) Swiff.fix();
- var instance = Swiff.nextInstance();
- Swiff.vars[instance] = {};
- props = $merge({
- width: 1,
- height: 1,
- id: instance,
- wmode: 'transparent',
- bgcolor: '#ffffff',
- allowScriptAccess: 'sameDomain',
- callBacks: {'onLoad': Class.empty},
- params: false
- }, props || {});
- var append = [];
- for (var p in props.callBacks){
- Swiff.vars[instance][p] = props.callBacks[p];
- append.push(p + '=Swiff.vars.' + instance + '.' + p);
- }
- if (props.params) append.push(Object.toQueryString(props.params));
- var swf = source + '?' + append.join('&');
- return new Element('div').setHTML(
- '<object width="', props.width, '" height="', props.height, '" id="', props.id, '" type="application/x-shockwave-flash" data="', swf, '">'
- ,'<param name="allowScriptAccess" value="', props.allowScriptAccess, '" />'
- ,'<param name="movie" value="', swf, '" />'
- ,'<param name="bgcolor" value="', props.bgcolor, '" />'
- ,'<param name="scale" value="noscale" />'
- ,'<param name="salign" value="lt" />'
- ,'<param name="wmode" value="', props.wmode, '" />'
- ,'</object>').firstChild;
- };
-
- Swiff.extend = $extend;
-
- Swiff.extend({
-
- count: 0,
-
- callBacks: {},
-
- vars: {},
-
- nextInstance: function(){
- return 'Swiff' + Swiff.count++;
- },
-
- //from swfObject, fixes bugs in ie+fp9
- fix: function(){
- Swiff.fixed = true;
- window.addEvent('beforeunload', function(){
- __flash_unloadHandler = __flash_savedUnloadHandler = Class.empty;
- });
- if (!window.ie) return;
- window.addEvent('unload', function(){
- $each(document.getElementsByTagName("object"), function(swf){
- swf.style.display = 'none';
- for (var p in swf){
- if (typeof swf[p] == 'function') swf[p] = Class.empty;
- }
- });
- });
- },
-
- /*
- Function: Swiff.getVersion
- gets the major version of the flash player installed.
-
- Returns:
- a number representing the flash version installed, or 0 if no player is installed.
- */
-
- getVersion: function(){
- if (!Swiff.pluginVersion) {
- var x;
- if(navigator.plugins && navigator.mimeTypes.length){
- x = navigator.plugins["Shockwave Flash"];
- if(x && x.description) x = x.description;
- } else if (window.ie){
- try {
- x = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
- x = x.GetVariable("$version");
- } catch(e){}
- }
- Swiff.pluginVersion = ($type(x) == 'string') ? parseInt(x.match(/\d+/)[0]) : 0;
- }
- return Swiff.pluginVersion;
- },
-
- /*
- Function: Swiff.remote
- Calls an ActionScript function from javascript. Requires ExternalInterface.
-
- Returns:
- Whatever the ActionScript Returns
- */
-
- remote: function(obj, fn){
- var rs = obj.CallFunction("<invoke name=\"" + fn + "\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments, 2) + "</invoke>");
- return eval(rs);
- }
-
- });
-
- /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Script: FancyUpload.js
- * FancyUpload - Flash meets Ajax for beauty uploads
- *
- * Based on Swiff.Base and Swiff.Uploader.
- *
- * Its intended that you edit this class to add your
- * own queue layout/text/effects. This is NO include
- * and forget class. If you want custom effects or
- * more output, use Swiff.Uploader as interface
- * for your new class or change this class.
- *
- * USAGE:
- * var inputElement = $E('input[type="file"]');
- * new FancyUpload(inputElement, {
- * swf: '../swf/Swiff.Uploader.swf'
- * // more options
- * })
- *
- * The target element has to be in an form, the upload starts onsubmit
- * by default.
- *
- * OPTIONS:
- *
- * url: Upload target URL, default is form-action if given, otherwise current page
- * swf: Path & filename of the swf file, default: Swiff.Uploader.swf
- * multiple: Multiple files selection, default: true
- * queued: Queued upload, default: true
- * types: Object with (description: extension) pairs, default: Images (*.jpg; *.jpeg; *.gif; *.png)
- * limitSize: Maximum size for one added file, bigger files are ignored, default: false
- * limitFiles: Maximum files in the queue, default: false
- * createReplacement: Function that creates the replacement for the input-file, default: false, so a button with "Browse Files" is created
- * instantStart: Upload starts instantly after selecting a file, default: false
- * allowDuplicates: Allow duplicate filenames in the queue, default: true
- * container: Container element for the swf, default: document.body, used only for the first FancyUpload instance, see QUIRKS
- * optionFxDuration: Fx duration for highlight, default: 250
- * queueList: The Element or ID for the queue list
- * onComplete: Event fired when one file is completed
- * onAllComplete: Event fired when all files uploaded
- *
- * NOTE:
- *
- * Flash FileReference is stupid, the request will have no cookies
- * or additional post data. Only the file is send in $_FILES['Filedata'],
- * with a wrong content-type (application/octet-stream).
- * When u have sessions, append them as get-data to the the url.
- *
- *
- * @version 1.0rc1
- *
- * @license MIT License
- *
- * @author Harald Kirschner <mail [at] digitarald [dot] de>
- * @copyright Authors
- */
- var FancyUpload = new Class({
-
- options: {
- url: false,
- swf: 'Swiff.Uploader.swf',
- multiple: true,
- queued: true,
- types: {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'},
- limitSize: false,
- limitFiles: false,
- createReplacement: null,
- instantStart: false,
- allowDuplicates: false,
- optionFxDuration: 250,
- container: null,
- queueList: 'photoupload-queue',
- onComplete: Class.empty,
- onError: Class.empty,
- onCancel: Class.empty,
- onAllComplete: Class.empty
- },
-
- initialize: function(el, options){
- this.element = $(el);
- this.setOptions(options);
- this.options.url = this.options.url || this.element.form.action || location.href;
- this.fileList = [];
-
- this.uploader = new Swiff.Uploader({
- onOpen: this.onOpen.bind(this),
- onProgress: this.onProgress.bind(this),
- onComplete: this.onComplete.bind(this),
- onError: this.onError.bind(this),
- onSelect: this.onSelect.bind(this)
- }, this.initializeFlash.bind(this), {
- swf: this.options.swf,
- types: this.options.types,
- multiple: this.options.multiple,
- queued: this.options.queued,
- container: this.options.container
- });
- },
-
- initializeFlash: function() {
- this.queue = $(this.options.queueList);
- $(this.element.form).addEvent('submit', this.upload.bindWithEvent(this));
- if (this.options.createReplacement) this.options.createReplacement(this.element);
- else {
- new Element('input', {
- type: 'button',
- value: 'Browse Files',
- events: {
- click: this.browse.bind(this)
- }
- }).injectBefore(this.element);
- this.element.remove();
- }
-
- },
-
- browse: function() {
- this.uploader.browse();
- },
-
- upload: function(e) {
- if (e) e.stop();
- this.uploader.send(this.options.url);
- },
-
- onSelect: function(name, size) {
- if (this.uploadTimer) this.uploadTimer = $clear(this.uploadTimer);
- if ((this.options.limitSize && (size > this.options.limitSize))
- || (this.options.limitFiles && (this.fileList.length >= this.options.limitFiles))
- || (!this.options.allowDuplicates && this.findFile(name, size) != -1)) return false;
- this.addFile(name, size);
- if (this.options.instantStart) this.uploadTimer = this.upload.delay(250, this);
- return true;
- },
-
- onOpen: function(name, size) {
- var index = this.findFile(name, size);
- this.fileList[index].status = 1;
- if (this.fileList[index].fx) return;
- this.fileList[index].fx = new Element('div', {'class': 'queue-subloader'}).injectInside(
- new Element('div', {'class': 'queue-loader'}).setHTML('Uploading').injectInside(this.fileList[index].element)
- ).effect('width', {
- duration: 200,
- wait: false,
- unit: '%',
- transition: Fx.Transitions.linear
- }).set(0);
- },
-
- onProgress: function(name, bytes, total, percentage) {
- this.uploadStatus(name, total, percentage);
- },
-
- onComplete: function(name, size) {
- var index = this.uploadStatus(name, size, 100);
- this.fileList[index].fx.element.setHTML('Completed');
- this.fileList[index].status = 2;
- this.highlight(index, 'e1ff80');
- this.checkComplete(name, size, 'onComplete');
- },
-
- /**
- * Error codes are just examples, customize them according to your server-errorhandling
- *
- */
- onError: function(name, size, error) {
- var msg = "Upload failed (" + error + ")";
- switch(error.toInt()) {
- case 500: msg = "Internal server error, please contact Administrator!"; break;
- case 400: msg = "Upload failed, please check your filesize!"; break;
- case 409: msg = "Could not process image, please choose another!"; break;
- case 415: msg = "Unsupported media type, please upload GIF, PNG, TIFF or JPEG!"; break;
- case 412: msg = "Invalid target, please reload page and try again!"; break;
- case 417: msg = "Photo too small, please keep our photo manifest in mind!"; break;
- }
- var index = this.uploadStatus(name, size, 100);
- this.fileList[index].fx.element.setStyle('background-color', '#ffd780').setHTML(msg);
- this.fileList[index].status = 2;
- this.highlight(index, 'ffd780');
- this.checkComplete(name, size, 'onError');
- },
-
- checkComplete: function(name, size, fire) {
- this.fireEvent(fire, [name, size]);
- if (this.nextFile() == -1) this.fireEvent('onAllComplete');
- },
-
- addFile: function(name, size) {
- if (!this.options.multiple && this.fileList.length) this.remove(this.fileList[0].name, this.fileList[0].size);
- this.fileList.push({
- name: name,
- size: size,
- status: 0,
- percentage: 0,
- element: new Element('li').setHTML('<span class="queue-file">'+ name +'</span><span class="queue-size" title="'+ size +' byte">~'+ Math.ceil(size / 1000) +' kb</span>').injectInside(this.queue)
- });
- new Element('a', {
- href: 'javascript:void(0)',
- 'class': 'input-delete',
- title: 'Remove from queue',
- events: {
- click: this.cancelFile.bindWithEvent(this, [name, size])
- }
- }).injectBefore(this.fileList.getLast().element.getFirst());
- this.highlight(this.fileList.length - 1, 'e1ff80');
- },
-
- uploadStatus: function(name, size, percentage) {
- var index = this.findFile(name, size);
- this.fileList[index].fx.start(percentage).element.setHTML(percentage +'%');
- this.fileList[index].percentage = percentage;
- return index;
- },
-
- uploadOverview: function() {
- var l = this.fileList.length, i = -1, percentage = 0;
- while (++i < l) percentage += this.fileList[i].percentage;
- return Math.ceil(percentage / l);
- },
-
- highlight: function(index, color) {
- return this.fileList[index].element.effect('background-color', {duration: this.options.optionFxDuration}).start(color, 'fff');
- },
-
- cancelFile: function(e, name, size) {
- e.stop();
- this.remove(name, size);
- },
-
- remove: function(name, size, index) {
- if (name) index = this.findFile(name, size);
- if (index == -1) return;
- if (this.fileList[index].status < 2) {
- this.uploader.remove(name, size);
- this.checkComplete(name, size, 'onCancel');
- }
- this.fileList[index].element.effect('opacity', {duration: this.options.optionFxDuration}).start(1, 0).chain(Element.remove.pass([this.fileList[index].element], Element));
- this.fileList.splice(index, 1);
- return;
- },
-
- findFile: function(name, size) {
- var l = this.fileList.length, i = -1;
- while (++i < l) if (this.fileList[i].name == name && this.fileList[i].size == size) return i;
- return -1;
- },
-
- nextFile: function() {
- var l = this.fileList.length, i = -1;
- while (++i < l) if (this.fileList[i].status != 2) return i;
- return -1;
- },
-
- clearList: function(complete) {
- var i = -1;
- while (++i < this.fileList.length) if (complete || this.fileList[i].status == 2) this.remove(0, 0, 0, i--);
- }
- });
-
- FancyUpload.implement(new Events, new Options);
/*
------------------------------------------------------------------------------------------------------------------------------------------------------------Script: Swiff.Uploader.js
Contains <Swiff.Uploader>
Author:
Valerio Proietti, <http://mad4milk.net>,
Harald Kirschner, <http://digitarald.de>
*/
/*
Class: Swiff.Uploader
creates an uploader instance. Requires an existing Swiff.Uploader.swf instance.
Arguments:
callBacks - an object, containing key/value pairs, representing the possible callbacks. See below.
onLoaded - Callback when the swf is initialized
options - types, multiple, queued, swf, url, container
callBacks:
onOpen - a function to fire when the user opens a file.
onProgress - a function to fire when the file is uploading. passes the name, the current uploaded size and the full size.
onSelect - a function to fire when the user selects a file.
onComplete - a function to fire when the file finishes uploading
onError - a function to fire when there is an error.
onCancel - a function to fire when the user cancels the file uploading.
*/
Swiff.Uploader = new Class({
options: {
types: false,
multiple: true,
queued: true,
swf: null,
url: null,
container: null
},
callBacks: {
onOpen: Class.empty,
onProgress: Class.empty,
onSelect: Class.empty,
onComplete: Class.empty,
onError: Class.empty,
onCancel: Class.empty
},
initialize: function(callBacks, onLoaded, options){
if (Swiff.getVersion() < 8) return false;
this.setOptions(options);
this.onLoaded = onLoaded;
var calls = $extend($merge(this.callBacks), callBacks || {});
for (p in calls) calls[p] = calls[p].bind(this);
this.instance = Swiff.nextInstance();
Swiff.callBacks[this.instance] = calls;
this.object = Swiff.Uploader.register(this.loaded.bind(this), this.options.swf, this.options.container);
return this;
},
loaded: function(){
Swiff.remote(this.object, 'create', this.instance, this.options.types, this.options.multiple, this.options.queued, this.options.url);
this.onLoaded.delay(10);
},
browse: function(){
Swiff.remote(this.object, 'browse', this.instance);
},
send: function(url){
Swiff.remote(this.object, 'upload', this.instance, url);
},
remove: function(name, size){
Swiff.remote(this.object, 'remove', this.instance, name, size);
},
fileIndex: function(name, size){
return Swiff.remote(this.object, 'fileIndex', this.instance, name, size);
},
fileList: function(){
return Swiff.remote(this.object, 'filelist', this.instance);
}
});
Swiff.Uploader.implement(new Options);
Swiff.Uploader.extend = $extend;
Swiff.Uploader.extend({
swf: 'Swiff.Uploader.swf',
callBacks: [],
register: function(callBack, url, container){
if (!Swiff.Uploader.object || !Swiff.Uploader.loaded) {
Swiff.Uploader.callBacks.push(callBack);
if (!Swiff.Uploader.object) {
Swiff.Uploader.object = new Swiff(url || Swiff.Uploader.swf, {callBacks: {'onLoad': Swiff.Uploader.onLoad}});
(container || document.body).appendChild(Swiff.Uploader.object);
}
}
else callBack.delay(10);
return Swiff.Uploader.object;
},
onLoad: function(){
Swiff.Uploader.loaded = true;
Swiff.Uploader.callBacks.each(function(fn){
fn.delay(10);
});
Swiff.Uploader.callBacks.length = 0;
}
});
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Script: Swiff.Base.js
Contains <Swiff>, <Swiff.getVersion>, <Swiff.remote>
Author:
Valerio Proietti, <http://mad4milk.net>
enhanced by Harald Kirschner <http://digitarald.de>
Credits:
Flash detection 'borrowed' from SWFObject.
*/
/*
Function: Swiff
creates a flash object with supplied parameters.
Arguments:
source - the swf path.
properties - an object with key/value pairs. all options are optional. see below.
where - the $(element) to inject the flash object.
Properties:
width - int, the width of the flash object. defaults to 0.
height - int, the height of the flash object. defaults to 0.
id - string, the id of the flash object. defaults to 'Swiff-Object-num_of_object_inserted'.
wmode - string, transparent or opaque.
bgcolor - string, hex value for the movie background color.
vars - an object of variables (functions, anything) you want to pass to your flash movie
Returns:
the object element, to be injected somewhere.
Important: the $ function on the OBJECT element wont extend it, will just target the movie by its id/reference. So its not possible to use the <Element> methods on it.
This is why it has to be injected using $('myFlashContainer').adopt(myObj) instead of $(myObj).injectInside('myFlashContainer');
Example:
(start code)
var obj = new Swiff('myMovie.swf', {
width: 500,
height: 400,
id: 'myBeautifulMovie',
wmode: 'opaque',
bgcolor: '#ff3300',
vars: {
onLoad: myOnloadFunc,
myVariable: myJsVar,
myVariableString: 'hello'
}
});
$('myElement').adopt(obj);
(end)
*/
var Swiff = function(source, props){
if (!Swiff.fixed) Swiff.fix();
var instance = Swiff.nextInstance();
Swiff.vars[instance] = {};
props = $merge({
width: 1,
height: 1,
id: instance,
wmode: 'transparent',
bgcolor: '#ffffff',
allowScriptAccess: 'sameDomain',
callBacks: {'onLoad': Class.empty},
params: false
}, props || {});
var append = [];
for (var p in props.callBacks){
Swiff.vars[instance][p] = props.callBacks[p];
append.push(p + '=Swiff.vars.' + instance + '.' + p);
}
if (props.params) append.push(Object.toQueryString(props.params));
var swf = source + '?' + append.join('&');
return new Element('div').setHTML(
'<object width="', props.width, '" height="', props.height, '" id="', props.id, '" type="application/x-shockwave-flash" data="', swf, '">'
,'<param name="allowScriptAccess" value="', props.allowScriptAccess, '" />'
,'<param name="movie" value="', swf, '" />'
,'<param name="bgcolor" value="', props.bgcolor, '" />'
,'<param name="scale" value="noscale" />'
,'<param name="salign" value="lt" />'
,'<param name="wmode" value="', props.wmode, '" />'
,'</object>').firstChild;
};
Swiff.extend = $extend;
Swiff.extend({
count: 0,
callBacks: {},
vars: {},
nextInstance: function(){
return 'Swiff' + Swiff.count++;
},
//from swfObject, fixes bugs in ie+fp9
fix: function(){
Swiff.fixed = true;
window.addEvent('beforeunload', function(){
__flash_unloadHandler = __flash_savedUnloadHandler = Class.empty;
});
if (!window.ie) return;
window.addEvent('unload', function(){
$each(document.getElementsByTagName("object"), function(swf){
swf.style.display = 'none';
for (var p in swf){
if (typeof swf[p] == 'function') swf[p] = Class.empty;
}
});
});
},
/*
Function: Swiff.getVersion
gets the major version of the flash player installed.
Returns:
a number representing the flash version installed, or 0 if no player is installed.
*/
getVersion: function(){
if (!Swiff.pluginVersion) {
var x;
if(navigator.plugins && navigator.mimeTypes.length){
x = navigator.plugins["Shockwave Flash"];
if(x && x.description) x = x.description;
} else if (window.ie){
try {
x = new ActiveXObject("ShockwaveFlash.ShockwaveFlash");
x = x.GetVariable("$version");
} catch(e){}
}
Swiff.pluginVersion = ($type(x) == 'string') ? parseInt(x.match(/\d+/)[0]) : 0;
}
return Swiff.pluginVersion;
},
/*
Function: Swiff.remote
Calls an ActionScript function from javascript. Requires ExternalInterface.
Returns:
Whatever the ActionScript Returns
*/
remote: function(obj, fn){
var rs = obj.CallFunction("<invoke name=\"" + fn + "\" returntype=\"javascript\">" + __flash__argumentsToXML(arguments, 2) + "</invoke>");
return eval(rs);
}
});
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------Script: FancyUpload.js
* FancyUpload - Flash meets Ajax for beauty uploads
*
* Based on Swiff.Base and Swiff.Uploader.
*
* Its intended that you edit this class to add your
* own queue layout/text/effects. This is NO include
* and forget class. If you want custom effects or
* more output, use Swiff.Uploader as interface
* for your new class or change this class.
*
* USAGE:
* var inputElement = $E('input[type="file"]');
* new FancyUpload(inputElement, {
* swf: '../swf/Swiff.Uploader.swf'
* // more options
* })
*
* The target element has to be in an form, the upload starts onsubmit
* by default.
*
* OPTIONS:
*
* url: Upload target URL, default is form-action if given, otherwise current page
* swf: Path & filename of the swf file, default: Swiff.Uploader.swf
* multiple: Multiple files selection, default: true
* queued: Queued upload, default: true
* types: Object with (description: extension) pairs, default: Images (*.jpg; *.jpeg; *.gif; *.png)
* limitSize: Maximum size for one added file, bigger files are ignored, default: false
* limitFiles: Maximum files in the queue, default: false
* createReplacement: Function that creates the replacement for the input-file, default: false, so a button with "Browse Files" is created
* instantStart: Upload starts instantly after selecting a file, default: false
* allowDuplicates: Allow duplicate filenames in the queue, default: true
* container: Container element for the swf, default: document.body, used only for the first FancyUpload instance, see QUIRKS
* optionFxDuration: Fx duration for highlight, default: 250
* queueList: The Element or ID for the queue list
* onComplete: Event fired when one file is completed
* onAllComplete: Event fired when all files uploaded
*
* NOTE:
*
* Flash FileReference is stupid, the request will have no cookies
* or additional post data. Only the file is send in $_FILES['Filedata'],
* with a wrong content-type (application/octet-stream).
* When u have sessions, append them as get-data to the the url.
*
*
* @version 1.0rc1
*
* @license MIT License
*
* @author Harald Kirschner <mail [at] digitarald [dot] de>
* @copyright Authors
*/
var FancyUpload = new Class({
options: {
url: false,
swf: 'Swiff.Uploader.swf',
multiple: true,
queued: true,
types: {'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'},
limitSize: false,
limitFiles: false,
createReplacement: null,
instantStart: false,
allowDuplicates: false,
optionFxDuration: 250,
container: null,
queueList: 'photoupload-queue',
onComplete: Class.empty,
onError: Class.empty,
onCancel: Class.empty,
onAllComplete: Class.empty
},
initialize: function(el, options){
this.element = $(el);
this.setOptions(options);
this.options.url = this.options.url || this.element.form.action || location.href;
this.fileList = [];
this.uploader = new Swiff.Uploader({
onOpen: this.onOpen.bind(this),
onProgress: this.onProgress.bind(this),
onComplete: this.onComplete.bind(this),
onError: this.onError.bind(this),
onSelect: this.onSelect.bind(this)
}, this.initializeFlash.bind(this), {
swf: this.options.swf,
types: this.options.types,
multiple: this.options.multiple,
queued: this.options.queued,
container: this.options.container
});
},
initializeFlash: function() {
this.queue = $(this.options.queueList);
$(this.element.form).addEvent('submit', this.upload.bindWithEvent(this));
if (this.options.createReplacement) this.options.createReplacement(this.element);
else {
new Element('input', {
type: 'button',
value: 'Browse Files',
events: {
click: this.browse.bind(this)
}
}).injectBefore(this.element);
this.element.remove();
}
},
browse: function() {
this.uploader.browse();
},
upload: function(e) {
if (e) e.stop();
this.uploader.send(this.options.url);
},
onSelect: function(name, size) {
if (this.uploadTimer) this.uploadTimer = $clear(this.uploadTimer);
if ((this.options.limitSize && (size > this.options.limitSize))
|| (this.options.limitFiles && (this.fileList.length >= this.options.limitFiles))
|| (!this.options.allowDuplicates && this.findFile(name, size) != -1)) return false;
this.addFile(name, size);
if (this.options.instantStart) this.uploadTimer = this.upload.delay(250, this);
return true;
},
onOpen: function(name, size) {
var index = this.findFile(name, size);
this.fileList[index].status = 1;
if (this.fileList[index].fx) return;
this.fileList[index].fx = new Element('div', {'class': 'queue-subloader'}).injectInside(
new Element('div', {'class': 'queue-loader'}).setHTML('Uploading').injectInside(this.fileList[index].element)
).effect('width', {
duration: 200,
wait: false,
unit: '%',
transition: Fx.Transitions.linear
}).set(0);
},
onProgress: function(name, bytes, total, percentage) {
this.uploadStatus(name, total, percentage);
},
onComplete: function(name, size) {
var index = this.uploadStatus(name, size, 100);
this.fileList[index].fx.element.setHTML('Completed');
this.fileList[index].status = 2;
this.highlight(index, 'e1ff80');
this.checkComplete(name, size, 'onComplete');
},
/**
* Error codes are just examples, customize them according to your server-errorhandling
*
*/
onError: function(name, size, error) {
var msg = "Upload failed (" + error + ")";
switch(error.toInt()) {
case 500: msg = "Internal server error, please contact Administrator!"; break;
case 400: msg = "Upload failed, please check your filesize!"; break;
case 409: msg = "Could not process image, please choose another!"; break;
case 415: msg = "Unsupported media type, please upload GIF, PNG, TIFF or JPEG!"; break;
case 412: msg = "Invalid target, please reload page and try again!"; break;
case 417: msg = "Photo too small, please keep our photo manifest in mind!"; break;
}
var index = this.uploadStatus(name, size, 100);
this.fileList[index].fx.element.setStyle('background-color', '#ffd780').setHTML(msg);
this.fileList[index].status = 2;
this.highlight(index, 'ffd780');
this.checkComplete(name, size, 'onError');
},
checkComplete: function(name, size, fire) {
this.fireEvent(fire, [name, size]);
if (this.nextFile() == -1) this.fireEvent('onAllComplete');
},
addFile: function(name, size) {
if (!this.options.multiple && this.fileList.length) this.remove(this.fileList[0].name, this.fileList[0].size);
this.fileList.push({
name: name,
size: size,
status: 0,
percentage: 0,
element: new Element('li').setHTML('<span class="queue-file">'+ name +'</span><span class="queue-size" title="'+ size +' byte">~'+ Math.ceil(size / 1000) +' kb</span>').injectInside(this.queue)
});
new Element('a', {
href: 'javascript:void(0)',
'class': 'input-delete',
title: 'Remove from queue',
events: {
click: this.cancelFile.bindWithEvent(this, [name, size])
}
}).injectBefore(this.fileList.getLast().element.getFirst());
this.highlight(this.fileList.length - 1, 'e1ff80');
},
uploadStatus: function(name, size, percentage) {
var index = this.findFile(name, size);
this.fileList[index].fx.start(percentage).element.setHTML(percentage +'%');
this.fileList[index].percentage = percentage;
return index;
},
uploadOverview: function() {
var l = this.fileList.length, i = -1, percentage = 0;
while (++i < l) percentage += this.fileList[i].percentage;
return Math.ceil(percentage / l);
},
highlight: function(index, color) {
return this.fileList[index].element.effect('background-color', {duration: this.options.optionFxDuration}).start(color, 'fff');
},
cancelFile: function(e, name, size) {
e.stop();
this.remove(name, size);
},
remove: function(name, size, index) {
if (name) index = this.findFile(name, size);
if (index == -1) return;
if (this.fileList[index].status < 2) {
this.uploader.remove(name, size);
this.checkComplete(name, size, 'onCancel');
}
this.fileList[index].element.effect('opacity', {duration: this.options.optionFxDuration}).start(1, 0).chain(Element.remove.pass([this.fileList[index].element], Element));
this.fileList.splice(index, 1);
return;
},
findFile: function(name, size) {
var l = this.fileList.length, i = -1;
while (++i < l) if (this.fileList[i].name == name && this.fileList[i].size == size) return i;
return -1;
},
nextFile: function() {
var l = this.fileList.length, i = -1;
while (++i < l) if (this.fileList[i].status != 2) return i;
return -1;
},
clearList: function(complete) {
var i = -1;
while (++i < this.fileList.length) if (complete || this.fileList[i].status == 2) this.remove(0, 0, 0, i--);
}
});
FancyUpload.implement(new Events, new Options);
Conclusion
Voila pour plus d'informations vous pouvez allés sur http://digitarald.de/project/fancyupload/
Historique
- 21 novembre 2007 14:07:07 :
- J'ai remplacer FancyUpload.js par la version non compressé
j'ai rajouté aussi Swiff.Uploader.fla et Swiff.Uploader.as pour ceux qui veulent voir comment fonctionne l'action script ou pour pouvoir modifier le swf. Enfin j'ai ajouté à tout ca la librairie Mootools (http://mootools.net/download) !
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
PopUp ajax lors de l'envoi de formulaire [ par newsmatique ]
Bonjour,j'ai un formulaire, qui m'envoi des données en GET sur la page traitement.php, je voudrais que lors de l'envoi de ce formulaire cela m'ouvre u
formulaire AJAX [ par TomSoyer ]
Bonjour à tous.Je suis programmeur débutant et j'aimerais bien faire un formulaire en AJAX avec des radio boutons et quand un clic sur 1 de ces radio
Formulaire Ajax [ par bibo06 ]
Bonjour, je n'ai jamais fais de script Ajax encore, mais j'ai besoin d'un formulaire interactif un peu spéciale.J'ai fait quelque recherche sur divers
Formulaire dynamique [ par alphacrash ]
Salut à tous, je vous explique mon problème :Je récupère le contenu d'une chaîne, par exemple celle-ci :$chaine="<html><body><input typ
Formulaire authentification ajax [ par shafte ]
Bonjour,Voilà je débute en ajax et j'aimerai créer un formulaire d'authentification coté client qui va se grace a ajax envoyer les info sur un serveur
Générateur dynamique de formulaire Ajax [ par plefebv ]
Bonjour ,C'est peut-être une FAQ tant le sujet me semble évident, mais j'ai dû passer à côté. Dans ce cas, merci de me faire savoir où trouver la doc
Problème AJAX et balise <form> [ par Valentino ]
Bonjour,J'ai récuperé un petit script qui me permet de faire de l'upload ajax (http://blogs.developpeur.org/cyril/archive/2007/03/24/ajax-et-upload-pa
Pb de soumission de formulaire php avec jQuery [ par prozenproses ]
Bonjour,Avant toute chose je vous annonce que je travaille sur une "plateforme" AJAX avec jQuery.Mon site se compose en 3 partie : - l'entete : qui re
Message d'attente pendant upload [ par cyberrider ]
Bonjour,J'ai un formulaire qui permet d'uploader des images, je voudrais une solution pour afficher un message pendant l'upload de l'image du genre "m
envoi formulaire sans mailto [ par tzam ]
Bonjour, je cherche une méthode pour envoyer un formulaire (case à cocher, champ texte...) à une adresse mail définie par avance sans passer par mailt
|
Derniers Blogs
[RIA SERVICES] INCLUDE ET DOMAINDATASOURCE[RIA SERVICES] INCLUDE ET DOMAINDATASOURCE par Audrey
Dans un de mes articles précédents , j'avais parlé des DomainDataSource avec RIA Services dans le cas d'une interface Maître - Détail. Dans le même principe, je vais parler d'une autre manière de mettre en forme ce cas d'interface avec RIA Services. Et po...
Cliquez pour lire la suite de l'article par Audrey ZUNE : VERSION ZUNE SOFTWARE V 4.2 ET LA SOCIALISATIONZUNE : VERSION ZUNE SOFTWARE V 4.2 ET LA SOCIALISATION par ROMELARD Fabrice
Une des nouveautés de la version V 3.0 était l'apparition de l'onglet Social qui ne fonctionnait que si le MarketPlace était activé sur son poste. Cela limitait donc son intérêt, car hors du cadre commercial USA-CANADA, peu de monde trouva...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice PRATIQUE DE SILVERLIGHT PAR ERIC AMBROSIPRATIQUE DE SILVERLIGHT PAR ERIC AMBROSI par MPOWARE
Je viens de finir la lecture du dernier livre d'
Eric Ambrosi
éditions PEARSON
Son livre donne une approche pratique de Silverlight qui sera aussi bien comprise par le développeur que par le designeur.
Tous les aspects du développement RIA sont abor...
Cliquez pour lire la suite de l'article par MPOWARE APPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NETAPPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NET par odewit
2 déclinaisons de Silverlight et 2 déclinaisons de Mono permettent dorénavant (ou permettront prochainement) de développer des applications .NET mobiles pour les principales plates-formes du marché :
Silverlight pour Symbian, basé sur Silverlight 2...
Cliquez pour lire la suite de l'article par odewit ZUNE : NOUVELLE VERSION DU ZUNE SOFTWARE - V 4.2ZUNE : NOUVELLE VERSION DU ZUNE SOFTWARE - V 4.2 par ROMELARD Fabrice
Avec la dernière génération du lecteur MP3 de Microsoft, le ZUNE HD, Microsoft a publié une nouvelle version du logiciel pour PC. Ainsi, je me suis décidé à installer celle-ci sur mon Tablet PC ACER, comme toujours le logiciel est donc tél...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice
Forum
RE : CONVERSIONRE : CONVERSION par peter2010
Cliquez pour lire la suite par peter2010
Logiciels
Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|